jointjs
Version:
JavaScript diagramming library
57 lines (48 loc) • 1.65 kB
HTML
<html>
<head>
<meta charset="utf8"/>
<title>HTML shapes</title>
<link rel="stylesheet" type="text/css" href="../../build/joint.css" />
<style>
html, body {
margin: 0;
padding: 0
}
#paper {
width: 650px;
height: 400px;
border: 1px solid gray;
overflow: hidden;
}
.my-html-element {
position: absolute;
background: #dbc8a2;
pointer-events: none;
-webkit-user-select: none;
-webkit-box-shadow: 10px 10px 5px -1px rgba(0,0,0,0.38);
-moz-box-shadow: 10px 10px 5px -1px rgba(0,0,0,0.38);
box-shadow: 10px 10px 5px -1px rgba(0,0,0,0.38);
padding: 5px;
box-sizing: border-box;
}
.my-html-element label {
line-height: 2em;
}
.my-html-element input {
pointer-events: auto;
}
</style>
</head>
<body>
<div id="paper"></div>
<button id="zoom-in">zoom in</button>
<button id="zoom-out">zoom out</button>
<!-- Dependencies: -->
<script src="../../node_modules/jquery/dist/jquery.js"></script>
<script src="../../node_modules/lodash/lodash.js"></script>
<script src="../../node_modules/backbone/backbone.js"></script>
<script src="../../build/joint.js"></script>
<script src="./src/html.js"></script>
</body>
</html>