folk-canvas/demo/iframed-arrows.html

55 lines
1.2 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Iframe Arrows</title>
<style>
html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
margin: 0;
}
fc-geometry {
border: 1px solid black;
border-radius: 3px;
}
fc-rope {
display: block;
position: absolute;
inset: 0 0 0 0;
pointer-events: none;
}
iframe {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<fc-geometry x="10" y="100" width="250" height="400">
<iframe id="frame1" src="./arrows.html"></iframe>
</fc-geometry>
<fc-geometry x="300" y="100" width="250" height="400">
<iframe id="frame2" src="./arrows.html"></iframe>
</fc-geometry>
<fc-rope source="#frame1 >>> #box1" target="#frame2 >>> #box1"></fc-rope>
<script type="module">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
import { FolkRope } from '../src/arrows/fc-rope.ts';
FolkGeometry.register();
FolkRope.register();
</script>
</body>
</html>