gjoint-line
Version:
join two elements with bezier line, arc line or square line
64 lines (53 loc) • 1.7 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="/vite.svg"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Vite App</title>
<style>
.transition{
transition: all .4s ease;
}
</style>
</head>
<body style="overflow: hidden;padding: 0; margin: 0;">
<input/>
direction
<select id="lineDirection">
<option>h</option>
<option>v</option>
</select>
line type
<select id="lineType">
<option>bezier</option>
<option>arc</option>
<option>square</option>
</select>
from join point
<select id="fromPoint">
<option>center</option>
<option>edge</option>
</select>
to join point
<select id="toPoint">
<option>center</option>
<option>edge</option>
</select>
redeeming px
<input class="redeeming" value="0"/>
<div id="container"
style="width: 90vw; height:90vh; position: relative; overflow: auto; margin: 0; padding: 0; margin-top:10px; margin-left:10px;">
<div id="from"
style="z-index: 2; position: absolute; width:100px; height:100px; background-color: #EEEEEE55; box-sizing: border-box; border-bottom: 1px solid teal; left:310px; top:315px;">
</div>
<div id="to"
style="z-index: 2;position: absolute; width:100px; height:100px; background-color: #EEEEEE55;box-sizing: border-box; border-bottom: 1px solid teal; left:550px; top:210px;"
class="transition">
</div>
<div id="svg" style="z-index: 1;" class="transition">
</div>
</div>
<script type="module" src="/index.js"></script>
</body>
</html>