add option for zIndexBase, separate options for node vs edge animations

esnet · Nov 28, 2022 · b0bb1e0 · b0bb1e0
1 parent 1826bfe
commit b0bb1e0
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 33 deletions.
diff --git a/dist/module.js b/dist/module.js
diff --git a/dist/module.js.map b/dist/module.js.map
diff --git a/dist/plugin.json b/dist/plugin.json
@@ -33,7 +33,7 @@
       }
     ],
     "version": "1.4.9",
-    "updated": "2022-11-23"
+    "updated": "2022-11-28"
   },
   "dependencies": {
     "grafanaDependency": ">=7.0.0",

diff --git a/src/MapPanel.tsx b/src/MapPanel.tsx
@@ -100,7 +100,8 @@ export class MapPanel extends Component<Props> {
       'thresholds',
       'enableScrolling',
       'enableEditing',
-      'enableAnimations',
+      'enableNodeAnimation',
+      'enableEdgeAnimation',
 
       'layer1',
       'color1',
@@ -339,6 +340,7 @@ export class MapPanel extends Component<Props> {
       });
     });
     options.thresholds = thresholds;
+    options.zIndexBase = 200;
 
     const output = this.resolveLatLngFromVars(options, data, replaceVariables);
     return React.createElement('esnet-map-canvas', {

diff --git a/src/components/MapCanvas.component.js b/src/components/MapCanvas.component.js
@@ -283,7 +283,8 @@ export class MapCanvas extends BindableHTMLElement {
     }
     if(
       wasChanged('background', changed) ||
-      wasChanged('enableAnimations', changed)
+      wasChanged('enableNodeAnimation', changed) ||
+      wasChanged('enableEdgeAnimation', changed)
     ){
       this.renderStyle();
     }
@@ -425,8 +426,35 @@ export class MapCanvas extends BindableHTMLElement {
     let mapstyle = this.shadow.querySelector("#mapstyle");
     let selectedOnlyButtonDisplay = this._selection && "inline-block" || "none";
 
+    let zIndexBase = this.options.zIndexBase ? this.options.zIndexBase : 50;
+    let zIndexLayers = [];
+    for(var i=0; i<=10; i++){
+      zIndexLayers.push(zIndexBase + (i * 10));
+    }
+
     mapstyle.innerHTML = `
       <style>
+
+        /* this is to bring grafana panel header on top leaflet layers */
+        .panel-header:hover { z-index: ${zIndexLayers[10]}; }
+        div.tooltip-hover { z-index: ${zIndexLayers[10]}; }
+        .home-overlay { z-index: ${zIndexLayers[8]}; }
+        .legend {  z-index: ${zIndexLayers[8]}; }
+        .leaflet-zoom-box { z-index: ${zIndexLayers[8]}; }
+        .leaflet-pane         { z-index: ${zIndexLayers[4]}; }
+
+        .leaflet-tile-pane    { z-index: ${zIndexLayers[1]}; }
+        .leaflet-overlay-pane { z-index: ${zIndexLayers[3]}; }
+        .leaflet-shadow-pane  { z-index: ${zIndexLayers[4]}; }
+        .leaflet-marker-pane  { z-index: ${zIndexLayers[5]}; }
+        .leaflet-tooltip-pane   { z-index: ${zIndexLayers[6]}; }
+        .leaflet-popup-pane   { z-index: ${zIndexLayers[7]}; }
+
+        .leaflet-map-pane canvas { z-index: ${zIndexLayers[0]}; }
+        .leaflet-map-pane svg    { z-index: ${zIndexLayers[1]}; }
+        .leaflet-control { z-index: ${zIndexLayers[8]}; }
+        .leaflet-bottom { z-index: ${zIndexLayers[10]}; }
+
           #map-${this.instanceId} { 
             font-family: sans-serif;
             background: ${this.options.background};
@@ -436,7 +464,7 @@ export class MapCanvas extends BindableHTMLElement {
           #map-${this.instanceId} > .home-overlay > .button.selected-only {
               display: ${ selectedOnlyButtonDisplay }
           }
-          ${ this.options.enableAnimations ? `
+          ${ this.options.enableNodeAnimation ? `
           .animated-node { 
             animation-name: throb;
             animation-duration: 1.5s;
@@ -449,7 +477,8 @@ export class MapCanvas extends BindableHTMLElement {
             50% {transform:scale(1.0, 1.0); }
             100% {transform:scale(1.5, 1.5); }
           }
-
+          ` : `` }
+          ${ this.options.enableEdgeAnimation ? `
           g.dash-over polygon {
             animation-name: crawl;
             animation-duration: 0.5s;

diff --git a/src/components/css/esmap.css.js b/src/components/css/esmap.css.js
@@ -74,7 +74,6 @@ svg circle.controlPoint {
 
 div.tooltip-hover {
   position:absolute;
-  z-index:10000;
   border-radius:4px;
   padding:10px;
   margin:10px;
@@ -163,14 +162,8 @@ input:checked + .slider:before {
   transform: translateX(18px);
 }
 
-/* this is to bring grafana panel header on top leaflet layers */
-.panel-header:hover {
-  z-index: 1000;
-}
-
 .home-overlay {
     position: absolute;
-    z-index: 600;
     margin-top: 12px;
     margin-left: 57px;
 }
@@ -185,7 +178,6 @@ input:checked + .slider:before {
 
 .legend {
     position: absolute;
-    z-index: 600;
     padding: 1em 1em 0.3em 1em;
     margin: 0.8em;
     box-shadow: 0px 0px 2px rgb(0 0 0 / 50%);

diff --git a/src/components/css/leaflet.css.js b/src/components/css/leaflet.css.js
@@ -87,25 +87,12 @@ export const leafletCss = `/* required styles */
     height: 0;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
-    z-index: 800;
     }
 /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
 .leaflet-overlay-pane svg {
     -moz-user-select: none;
     }
 
-.leaflet-pane         { z-index: 400; }
-
-.leaflet-tile-pane    { z-index: 200; }
-.leaflet-overlay-pane { z-index: 400; }
-.leaflet-shadow-pane  { z-index: 500; }
-.leaflet-marker-pane  { z-index: 600; }
-.leaflet-tooltip-pane   { z-index: 650; }
-.leaflet-popup-pane   { z-index: 700; }
-
-.leaflet-map-pane canvas { z-index: 100; }
-.leaflet-map-pane svg    { z-index: 200; }
-
 .leaflet-vml-shape {
     width: 1px;
     height: 1px;
@@ -121,14 +108,12 @@ export const leafletCss = `/* required styles */
 
 .leaflet-control {
     position: relative;
-    z-index: 800;
     pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
     pointer-events: auto;
     }
 .leaflet-top,
 .leaflet-bottom {
     position: absolute;
-    z-index: 1000;
     pointer-events: none;
     }
 .leaflet-top {

diff --git a/src/module.ts b/src/module.ts
@@ -329,8 +329,15 @@ plugin.setPanelOptions((builder) => {
     defaultValue: true,
   });
   builder.addBooleanSwitch({
-    path: 'enableAnimations',
-    name: 'Enable Traffic Direction Animations',
+    path: 'enableNodeAnimation',
+    name: 'Enable Node Selection Animations',
+    description: 'Enable throb animation for nodes. May be CPU/GPU intensive in some browsers.',
+    category: ViewCategory,
+    defaultValue: true,
+  });
+  builder.addBooleanSwitch({
+    path: 'enableEdgeAnimation',
+    name: 'Enable Edge Traffic Direction Animations',
     description: 'Enable animations for traffic direction on edges. May be CPU/GPU intensive in some browsers.',
     category: ViewCategory,
     defaultValue: true,

diff --git a/src/types.ts b/src/types.ts
@@ -23,7 +23,8 @@ export interface MapOptions {
   showLegend: boolean;
   enableScrolling: boolean;
   enableEditing: boolean;
-  enableAnimations: boolean;
+  enableNodeAnimation: boolean;
+  enableEdgeAnimation: boolean;
   layer1: boolean;
   mapjsonL1: string;
   nodeHighlightL1: string;
@@ -68,4 +69,5 @@ export interface MapOptions {
   legendColumnLength: number;
   legendPosition: string;
   legendDefaultBehavior: string;
+  zIndexBase: number;
 }