Implement non-measured layers of nodes to plexus (#420)

Implement non-measured layers of nodes to plexus
jaegertracing · Jul 25, 2019 · 6b59893 · 6b59893
2 parents 28be2cd + a87b5a9
commit 6b59893
Show file tree

Hide file tree

Showing 16 changed files with 663 additions and 272 deletions.
diff --git a/packages/plexus/demo/src/index.css b/packages/plexus/demo/src/index.css
@@ -18,29 +18,76 @@ html {
   font-family: Arial, Helvetica, sans-serif;
 }
 
+.demo-row {
+  display: flex;
+  flex-wrap: nowrap;
+}
+
+.demo-row > :first-child {
+  margin-right: 3rem;
+}
+
 .DemoGraph {
   border: 1px solid #666;
   cursor: move;
   overflow: hidden;
-  height: 500px;
-  width: 800px;
+  height: 700px;
+  width: 700px;
   position: relative;
 }
 
+.DemoGraph.is-small {
+  height: 250px;
+  width: 350px;
+}
+
 .DemoGraph--dag {
   background: #f0f0f0;
   stroke-width: 0.85;
 }
 
 .DemoGraph--node {
   background: #bbb;
-  border: 1px solid #999;
-  box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.4);
+  border: 1px solid #777;
+  /* box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.4); */
   cursor: pointer;
   padding: 0.8em 1.25em;
   white-space: nowrap;
 }
 
+.DemoGraph--node.is-vector-bordered {
+  border: none;
+}
+
+.DemoGraph--node--emphasized {
+  position: absolute;
+  /* content: ""; */
+  left: -20px;
+  right: -20px;
+  top: -20px;
+  bottom: -20px;
+  background-image: repeating-linear-gradient(-60deg, #fffb8f, #fff566 3px, #fffb8f 5px);
+  border: 1px dashed rgba(173, 139, 0, 0.5);
+}
+
+.DemoGraph--node--vectorBorder {
+  fill: none;
+  stroke: #777;
+  stroke-width: 2;
+}
+
+.DemoGraph--node--vectorEmphasized {
+  fill: none;
+  stroke: #fff566;
+  stroke-width: 10;
+}
+
+.DemoGraph--node--vectorEmphasized-border {
+  fill: none;
+  stroke: rgba(173, 139, 0, 0.5);
+  stroke-width: 12;
+}
+
 .DemoGraph--node:hover {
   background: #666;
   color: #fff;