mirror of
https://github.com/idrawjs/idraw
synced 2026-05-24 01:58:27 +00:00
feat: add event named screenDoubleClickElement to @idraw/core
This commit is contained in:
chenshenhai
parent
58a42fd313
commit
1ef29d2346
5 changed files with 147 additions and 4 deletions
|
|
@ -39,7 +39,7 @@ const core = new Core(mount, {
|
|||
});
|
||||
|
||||
|
||||
// initEvent();
|
||||
initEvent();
|
||||
|
||||
core.setData(data);
|
||||
|
||||
|
|
@ -81,5 +81,8 @@ function initEvent() {
|
|||
core.on('screenChangeElement', (data) => {
|
||||
console.log('screenChangeElement: ', data);
|
||||
});
|
||||
core.on('screenDoubleClickElement', (p) => {
|
||||
console.log('screenDoubleClickElement ===', p)
|
||||
})
|
||||
|
||||
}
|
||||
125
packages/core/examples/test/event.html
Normal file
125
packages/core/examples/test/event.html
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
<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="./../../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 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>
|
||||
|
|
@ -18,7 +18,8 @@ import { TempData } from './lib/temp';
|
|||
import {
|
||||
_board, _data, _opts, _config, _renderer, _element, _helper, _hasInited,
|
||||
_mode, _tempData, _prevPoint, _draw,
|
||||
_selectedDotDirection, _coreEvent, _mapper, _initEvent, _handlePoint, _handleClick,
|
||||
_selectedDotDirection, _coreEvent, _mapper, _initEvent,
|
||||
_handlePoint, _handleClick, _handleDoubleClick,
|
||||
_handleMoveStart, _handleMove, _handleMoveEnd, _handleHover, _dragElements,
|
||||
_transfromElement, _emitChangeScreen, _emitChangeData, _onlyRender, _cursorStatus,
|
||||
} from './names';
|
||||
|
|
@ -257,8 +258,8 @@ class Core {
|
|||
}
|
||||
|
||||
this[_board].on('hover', time.throttle(this[_handleHover].bind(this), 32));
|
||||
|
||||
this[_board].on('point', time.throttle(this[_handleClick].bind(this), 16));
|
||||
this[_board].on('doubleClick', this[_handleDoubleClick].bind(this));
|
||||
if (this[_onlyRender] === true) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -268,6 +269,17 @@ class Core {
|
|||
this[_board].on('moveEnd', this[_handleMoveEnd].bind(this));
|
||||
}
|
||||
|
||||
private [_handleDoubleClick](point: TypePoint) {
|
||||
const [index, uuid] = this[_element].isPointInElement(point, this[_data]);
|
||||
if (index >= 0 && uuid) {
|
||||
this[_coreEvent].trigger(
|
||||
'screenDoubleClickElement',
|
||||
{ index, uuid, element: deepClone(this[_data].elements?.[index])}
|
||||
);
|
||||
}
|
||||
this[_draw]();
|
||||
}
|
||||
|
||||
private [_handleClick](point: TypePoint): void {
|
||||
const [index, uuid] = this[_element].isPointInElement(point, this[_data]);
|
||||
if (index >= 0 && uuid) {
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ export type TypeCoreEventArgMap = {
|
|||
'mouseOverElement': TypeCoreEventSelectBaseArg & { element: TypeElement<keyof TypeElemDesc> }
|
||||
'mouseLeaveElement': TypeCoreEventSelectBaseArg & { element: TypeElement<keyof TypeElemDesc> }
|
||||
'screenClickElement': TypeCoreEventSelectBaseArg & { element: TypeElement<keyof TypeElemDesc> }
|
||||
'screenDoubleClickElement': TypeCoreEventSelectBaseArg & { element: TypeElement<keyof TypeElemDesc> }
|
||||
'screenSelectElement': TypeCoreEventSelectBaseArg & { element: TypeElement<keyof TypeElemDesc> }
|
||||
'screenMoveElementStart': TypeCoreEventSelectBaseArg & TypePoint,
|
||||
'screenMoveElementEnd': TypeCoreEventSelectBaseArg & TypePoint,
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ const _coreEvent = Symbol('_coreEvent');
|
|||
const _mapper = Symbol('_mapper');
|
||||
const _initEvent = Symbol('_initEvent');
|
||||
const _handleClick = Symbol('_handleClick');
|
||||
const _handleDoubleClick = Symbol('_handleDoubleClick');
|
||||
const _handlePoint = Symbol('_handlePoint');
|
||||
const _handleMoveStart = Symbol('_handleMoveStart');
|
||||
const _handleMove = Symbol('_handleMove');
|
||||
|
|
@ -30,7 +31,8 @@ const _cursorStatus = Symbol('_cursorStatus');
|
|||
export {
|
||||
_board, _data, _opts, _config, _renderer, _element, _helper, _hasInited,
|
||||
_mode, _tempData, _prevPoint, _draw,
|
||||
_selectedDotDirection, _coreEvent, _mapper, _initEvent, _handlePoint, _handleClick,
|
||||
_selectedDotDirection, _coreEvent, _mapper, _initEvent,
|
||||
_handlePoint, _handleClick, _handleDoubleClick,
|
||||
_handleMoveStart, _handleMove, _handleMoveEnd, _handleHover, _dragElements,
|
||||
_transfromElement, _emitChangeScreen, _emitChangeData, _onlyRender, _cursorStatus,
|
||||
};
|
||||
Loading…
Reference in a new issue