TestGraph

client/css/graph.css

@@ -0,0 +1,62 @@
+#paper {
+   position: relative;
+   border: 1px solid gray;
+   display: inline-block;
+   background: transparent;
+   overflow: hidden;
+}
+#paper svg {
+   background: transparent;
+}
+#paper svg .link {
+   z-index: 2;
+}
+.html-element {
+   position: absolute;
+   background: #3498DB;
+   /* Make sure events are propagated to the JointJS element so, e.g. dragging works.*/
+   pointer-events: none;
+   -webkit-user-select: none;
+   border-radius: 4px;
+   border: 2px solid #2980B9;
+   padding: 5px;
+   box-sizing: border-box;
+   z-index: 2;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+}
+.html-element select,
+.html-element input,
+.html-element button {
+   /* Enable interacting with inputs only. */
+   pointer-events: auto;   
+}
+.html-element input.config {
+   width: 22px;
+   height: 22px;
+   position: absolute;
+   top: 1px;
+   left: 102px;
+   padding: 0;
+   margin: 0;
+   font-weight: bold;
+   cursor: pointer;
+}
+.html-element img {
+   margin: 8px;
+}
+.html-element input.config:hover {
+   width: 25px;
+   height: 25px;
+   margin: -1px;
+}
+
+.html-element label {
+   color: #333;
+   text-align: center;
+   margin: auto;
+   font-weight: bold;
+   font-size: 12px;
+   float: right;
+}