Elgato_dark/idraw
1
0
Fork 0
mirror of https://github.com/idrawjs/idraw synced 2026-05-24 10:08:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: board event in iframes

Browse source
This commit is contained in:
chenshenhai 2021-10-17 14:58:36 +08:00
parent 5a6f75f6e1
commit 6805d5f6e5
5 changed files with 80 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/board/examples/features/parent.html
View file

@ -4,8 +4,9 @@
<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: 200px;
margin-top: 50px;
margin-left: 100px;
border: 1px solid #666666;
}
</style>
</head>

22
packages/board/examples/features/top.html Normal file
View file

@ -0,0 +1,22 @@
<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>

44
packages/board/src/lib/screen-watcher.ts
View file

@ -1,9 +1,9 @@
import { TypePoint } from '@idraw/types';
import util from '@idraw/util';
// import util from '@idraw/util';
import { BoardEvent, TypeBoardEventArgMap } from './event';
import { TempData } from './watcher-temp';
const { throttle } = util.time;
// const { throttle } = util.time;
// const isInIframe = window.self === window.top;
@ -52,23 +52,41 @@ export class ScreenWatcher {
canvas.addEventListener('mouseup', this._listenCanvasMoveEnd.bind(this), true);
canvas.addEventListener('mouseover', this._listenCanvasMoveOver.bind(this), true);
canvas.addEventListener('mouseleave', this._listenCanvasMoveLeave.bind(this), true);
// If in iframe
if (window.self !== window.parent) {
// If in same origin
if (window.self.origin === window.parent.self.origin) {
window.parent.window.addEventListener(
'mousemove',
throttle(this._listSameOriginParentWindow.bind(this), 16),
false);
}
}
this._initParentEvent();
// container.addEventListener('touchstart', this._listenMoveStart.bind(this), true);
// container.addEventListener('touchmove', this._listenMove.bind(this), true);
// container.addEventListener('touchend', this._listenMoveEnd.bind(this), true);
}
_initParentEvent() {
let target = window;
let targetOrigin = target.origin;
while (target.self !== target.top) {
// If in iframe
if (target.self !== target.parent) {
// If in same origin
if (target.origin === targetOrigin) {
// window.parent.window.addEventListener(
// 'mousemove',
// throttle(this._listSameOriginParentWindow.bind(this), 16),
// false);
window.parent.window.addEventListener(
'mousemove',
this._listSameOriginParentWindow.bind(this),
false);
}
}
// @ts-ignore
target = target.parent;
if (!target) {
break;
}
}
}
_listenHover(e: MouseEvent|TouchEvent): void {
e.preventDefault();
const p = this._getPosition(e);

4
packages/core/examples/features/parent.html
View file

@ -4,8 +4,8 @@
<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: 200px;
margin-top: 50px;
margin-left: 100px;
border: 1px solid #cccccc;
}
</style>

22
packages/core/examples/features/top.html Normal file
View file

@ -0,0 +1,22 @@
<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>