hexagon current state

src/app/components/network-legend/network-legend.component.html

@@ -17,33 +17,40 @@
           <ng-container *ngIf="!nodeGroup.value.image" [ngSwitch]="nodeGroup.value.shape">
             <!-- no image given, create icon programmatically -->
             <td *ngSwitchCase="'text'">
-              <span class="node {{ nodeGroup.value.shape }}">
+              <span class="node text">
                 text
               </span>
             </td>
+            <td *ngSwitchCase="'hexagon'">
+              <div class="node hexagon">
+                <div class="hexagon-in1">
+                  <div class="hexagon-in2" [style.background-color]=nodeGroup.value.color></div>
+                </div>
+              </div>
+            </td>
             <td *ngSwitchCase="'triangle'">
-              <span class="node {{ nodeGroup.value.shape }}" [style.border-bottom-color]=nodeGroup.value.color>
+              <span class="node triangle" [style.border-bottom-color]=nodeGroup.value.color>
               </span>
             </td>
             <td *ngSwitchCase="'triangleDown'">
-              <span class="node {{ nodeGroup.value.shape }}" [style.border-top-color]=nodeGroup.value.color>
+              <span class="node triangleDown" [style.border-top-color]=nodeGroup.value.color>
               </span>
             </td>
             <td *ngSwitchCase="'diamond'">
-              <span class="node {{ nodeGroup.value.shape }}" 
+              <span class="node diamond" 
                     [style.background-color]=nodeGroup.value.color
               >
               </span>
             </td>
             <td *ngSwitchCase="'star'">
-              <span class="node {{ nodeGroup.value.shape }}"
+              <span class="node star"
                     [style.border-bottom-color]=nodeGroup.value.color
                     [style.color]=nodeGroup.value.color
               >
               </span>
             </td>
             <td *ngSwitchCase="'circle'">
-              <span class="node {{ nodeGroup.value.shape }}" [style.background-color]=nodeGroup.value.color>
+              <span class="node circle" [style.background-color]=nodeGroup.value.color>
               ...
               </span>
               </td>

src/app/components/network-legend/network-legend.component.scss

@@ -107,6 +107,48 @@ div.legend {
         height: $legend-square-width;
         display: inline-block;
       }
+      .hexagon {
+        overflow: hidden;
+        visibility: hidden;
+        -webkit-transform: rotate(120deg);
+           -moz-transform: rotate(120deg);
+            -ms-transform: rotate(120deg);
+             -o-transform: rotate(120deg);
+                transform: rotate(120deg);
+        cursor: pointer;
+        .hexagon {
+          overflow: hidden;
+          visibility: hidden;
+          -webkit-transform: rotate(120deg);
+             -moz-transform: rotate(120deg);
+              -ms-transform: rotate(120deg);
+               -o-transform: rotate(120deg);
+                  transform: rotate(120deg);
+          cursor: pointer;
+          }
+      .hexagon-in1 {
+          overflow: hidden;
+          width: 100%;
+          height: 100%;
+          -webkit-transform: rotate(-60deg);
+             -moz-transform: rotate(-60deg);
+              -ms-transform: rotate(-60deg);
+               -o-transform: rotate(-60deg);
+                  transform: rotate(-60deg);
+          }
+      .hexagon-in2 {
+          width: 100%;
+          height: 100%;
+          background-repeat: no-repeat;
+          background-position: 50%;
+          visibility: visible;
+          -webkit-transform: rotate(-60deg);
+             -moz-transform: rotate(-60deg);
+              -ms-transform: rotate(-60deg);
+               -o-transform: rotate(-60deg);
+                  transform: rotate(-60deg);
+          }
+        }
       .legend-icon {
         width: $legend-row-height;
         height: $legend-row-height;

src/index.html

@@ -36,7 +36,7 @@
 
   <network-expander id="netexp1"
                     config='{
-                      "nodeGroups": {"0.5": {"type": "0.5er Instanz", "color": "rgb(204, 255, 51)", "groupName": "0.5", "shape": "triangleDown"}, "patientgroup": {"type": "Patient", "detailShowLabel": "true", "color": "red", "groupName": "patient group", "shape": "triangle"}},
+                      "nodeGroups": {"0.5": {"type": "0.5er Instanz", "color": "rgb(204, 255, 51)", "groupName": "0.5", "shape": "hexagon"}, "patientgroup": {"type": "Patient", "detailShowLabel": "true", "color": "red", "groupName": "patient group", "shape": "dot"}},
                       "edgeGroups": {"dashes": {"color": "black", "groupName": "dashes Group", "dashes": [1, 2]}, "notdashes": {"color": "black", "groupName": "not dashes Group"}},
                       "identifier": "symbol"
                     }'