Merge pull request #71 from andymchugh/zoomactivation

zoom activation

CHANGELOG.md

@@ -1,6 +1,14 @@
 # Changelog
 
 ## 1.x.0
+
+Zoom Pan Pinch Wheel Activation
+-------------------------------
+This adds the ability to require an activation key such as 'Alt' to be pressed in order to enter
+panel zoom. There's a clash of interest between panel zoom and dashboard scroll which can be
+avoided by using this feature. Mew config terms in siteConfig and panelConfig:
+- zoomPanPinch
+
 Compound Colors
 ---------------
 This feature allows a labelColor, strokeColor or fillColor to be driven based off

provisioning/dashboardData/zoomPanPinch.yaml

@@ -0,0 +1,4 @@
+---
+
+zoomPanPinch:
+  wheelActivationKeys: ["Alt"]

provisioning/dashboards/zoomPanPinch.json

@@ -0,0 +1,217 @@
+{
+    "annotations": {
+      "list": [
+        {
+          "builtIn": 1,
+          "datasource": {
+            "type": "grafana",
+            "uid": "-- Grafana --"
+          },
+          "enable": true,
+          "hide": true,
+          "iconColor": "rgba(0, 211, 255, 1)",
+          "name": "Annotations & Alerts",
+          "type": "dashboard"
+        }
+      ]
+    },
+    "editable": true,
+    "fiscalYearStartMonth": 0,
+    "graphTooltip": 0,
+    "id": 3,
+    "links": [],
+    "liveNow": false,
+    "panels": [
+      {
+        "datasource": {
+          "type": "datasource",
+          "uid": "grafana"
+        },
+        "gridPos": {
+          "h": 5,
+          "w": 24,
+          "x": 0,
+          "y": 0
+        },
+        "id": 123127,
+        "options": {
+          "code": {
+            "language": "plaintext",
+            "showLineNumbers": false,
+            "showMiniMap": false
+          },
+          "content": "# Zoom Pan Pinch\n\nThis dashboard demonstrates the Zoom-Pan-Pinch configurability which supports:\n- Enable / disable as panel configuration\n- Wheel activation keys. These are helpful as there's a clash of interests between dashboard scroll and panel zoom.",
+          "mode": "markdown"
+        },
+        "pluginVersion": "10.0.0",
+        "type": "text"
+      },
+      {
+        "datasource": {
+          "type": "datasource",
+          "uid": "grafana"
+        },
+        "gridPos": {
+          "h": 9,
+          "w": 12,
+          "x": 0,
+          "y": 5
+        },
+        "id": 123125,
+        "options": {
+          "animationsEnabled": true,
+          "debuggingCtr": {
+            "colorsCtr": 0,
+            "dataCtr": 0,
+            "displaySvgCtr": 0,
+            "mappingsCtr": 0,
+            "timingsCtr": 0
+          },
+          "highlighterEnabled": true,
+          "panZoomEnabled": true,
+          "panelConfig": "---\n\nzoomPanPinch:\n  wheelActivationKeys: [\"Alt\"]",
+          "siteConfig": "",
+          "svg": "https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/darkThemeSvg1.svg",
+          "testDataEnabled": true,
+          "timeSliderEnabled": true
+        },
+        "title": "PanelConfig => wheel activation to 'Alt'",
+        "type": "andrewbmchugh-flow-panel"
+      },
+      {
+        "datasource": {
+          "type": "datasource",
+          "uid": "grafana"
+        },
+        "gridPos": {
+          "h": 9,
+          "w": 12,
+          "x": 12,
+          "y": 5
+        },
+        "id": 123130,
+        "options": {
+          "animationsEnabled": true,
+          "debuggingCtr": {
+            "colorsCtr": 0,
+            "dataCtr": 0,
+            "displaySvgCtr": 0,
+            "mappingsCtr": 0,
+            "timingsCtr": 0
+          },
+          "highlighterEnabled": true,
+          "panZoomEnabled": true,
+          "siteConfig": "---\n\nzoomPanPinch:\n  wheelActivationKeys: [\"Alt\"]",
+          "svg": "https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/darkThemeSvg1.svg",
+          "testDataEnabled": true,
+          "timeSliderEnabled": true
+        },
+        "title": "SiteConfig => wheel activation to 'Alt'",
+        "type": "andrewbmchugh-flow-panel"
+      },
+      {
+        "datasource": {
+          "type": "datasource",
+          "uid": "grafana"
+        },
+        "gridPos": {
+          "h": 9,
+          "w": 12,
+          "x": 0,
+          "y": 14
+        },
+        "id": 123129,
+        "options": {
+          "animationsEnabled": true,
+          "debuggingCtr": {
+            "colorsCtr": 0,
+            "dataCtr": 0,
+            "displaySvgCtr": 0,
+            "mappingsCtr": 0,
+            "timingsCtr": 0
+          },
+          "highlighterEnabled": true,
+          "panZoomEnabled": true,
+          "panelConfig": "---\n\nzoomPanPinch:\n  wheelActivationKeys: []",
+          "siteConfig": "---\n\nzoomPanPinch:\n  wheelActivationKeys: [\"Alt\"]",
+          "svg": "https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/darkThemeSvg1.svg",
+          "testDataEnabled": true,
+          "timeSliderEnabled": true
+        },
+        "title": "SiteConfig => wheel activation to 'Alt', panelConfig overrides back to empty",
+        "type": "andrewbmchugh-flow-panel"
+      },
+      {
+        "datasource": {
+          "type": "datasource",
+          "uid": "grafana"
+        },
+        "gridPos": {
+          "h": 9,
+          "w": 12,
+          "x": 12,
+          "y": 14
+        },
+        "id": 123128,
+        "options": {
+          "animationsEnabled": true,
+          "debuggingCtr": {
+            "colorsCtr": 0,
+            "dataCtr": 0,
+            "displaySvgCtr": 0,
+            "mappingsCtr": 0,
+            "timingsCtr": 0
+          },
+          "highlighterEnabled": true,
+          "panZoomEnabled": false,
+          "svg": "https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/main/examples/darkThemeSvg1.svg",
+          "testDataEnabled": true,
+          "timeSliderEnabled": true
+        },
+        "title": "Pan / Zoom Disabled",
+        "type": "andrewbmchugh-flow-panel"
+      }
+    ],
+    "refresh": "",
+    "schemaVersion": 38,
+    "style": "dark",
+    "tags": [],
+    "templating": {
+      "list": []
+    },
+    "time": {
+      "from": "now-3h",
+      "to": "now"
+    },
+    "timepicker": {
+      "hidden": false,
+      "refresh_intervals": [
+        "5s",
+        "10s",
+        "30s",
+        "1m",
+        "5m",
+        "15m",
+        "30m",
+        "1h",
+        "2h",
+        "1d"
+      ],
+      "time_options": [
+        "5m",
+        "15m",
+        "1h",
+        "6h",
+        "12h",
+        "24h",
+        "2d",
+        "7d",
+        "30d"
+      ],
+      "type": "timepicker"
+    },
+    "timezone": "browser",
+    "title": "Zoom Pan Pinch",
+    "version": 1,
+    "weekStart": ""
+  }

src/components/Config.tsx

@@ -125,7 +125,12 @@ export type PanelConfigHighlighter = {
   condensed: boolean;
 };
 
+export type ZoomPanPinch = {
+  wheelActivationKeys: string[] | undefined;
+};
+
 export type SiteConfig = {
+  zoomPanPinch: ZoomPanPinch;
   variableThresholdScalars: Map<string, VariableThresholdScalars[]>;
   links: Map<string, Link>;
   colors: Map<string, string>;
@@ -135,6 +140,7 @@ export type SiteConfig = {
 
 export type PanelConfig = {
   test: TestConfig;
+  zoomPanPinch: ZoomPanPinch;
   background: Background;
   animationsPresent: boolean;
   variableThresholdScalars: Map<string, VariableThresholdScalars[]>;
@@ -175,6 +181,7 @@ export function panelConfigFactory(config: any) {
 
   return {
     test: config.test || {},
+    zoomPanPinch: config.zoomPanPinch || {},
     background: config.background || {},
     variableThresholdScalars: new Map<string, VariableThresholdScalars[]>(Object.entries(config.variableThresholdScalars || {})),
     gradientMode: config.gradientMode || 'none',
@@ -190,6 +197,7 @@ export function panelConfigFactory(config: any) {
 export function siteConfigFactory(config: any) {
   config = config || {};
   return {
+    zoomPanPinch: config.zoomPanPinch || {},
     links: new Map<string, Link>(Object.entries(config.links || {})),
     colors: new Map<string, string>(Object.entries(config.colors || {})),
     variableThresholdScalars: new Map<string, VariableThresholdScalars[]>(Object.entries(config.variableThresholdScalars || {})),
@@ -304,6 +312,9 @@ function panelConfigDereference(siteConfig: SiteConfig, panelConfig: PanelConfig
       panelConfig.animationsPresent = true;
     }
   });
+
+  // Blend ZoomPanPinch settings
+  panelConfig.zoomPanPinch = {...siteConfig.zoomPanPinch, ...panelConfig.zoomPanPinch};
 }
 
 export function configInit(siteConfig: SiteConfig, panelConfig: PanelConfig) {

src/components/FlowPanel.tsx

@@ -360,7 +360,8 @@ export const FlowPanel: React.FC<Props> = ({ options, data, width, height, timeZ
     <div>
       <TransformWrapper
         disabled={!options.panZoomEnabled}
-        doubleClick={{mode: "reset"}}>
+        doubleClick={{mode: "reset"}}
+        wheel={{activationKeys: panelConfig?.zoomPanPinch.wheelActivationKeys || []}}>
         <TransformComponent>
           <div className={cx(
             styles.wrapper,

yaml_defs/panelConfig.yaml

@@ -31,6 +31,15 @@ test:
   # Version 1.12.0 onwards: When set test data values are extended with a string-data timeseries.
   testDataStringData: false
 
+# Version 1.14.0 onwards: The zoomPanPinch yaml provides customization of the zoom-pan-pinch
+# behavior. It can be defined in either panelConfig or siteConfig.
+zoomPanPinch:
+  # This optional term defines the array of keys that can be used to enable wheel zoom. There's
+  # a clash of interest between panel zoom and dashboard scrolling which is easy to avoid with small
+  # SVGs, but becomes more problematic when the SVG is large and covers a lot of the screen. By
+  # requiring a combo such as ALT+Scroll this clash can be avoided. 
+  wheelActivationKeys: ["Alt"]
+
 #------------------------------------------------------------------------------
 # Grafana Variable Scalars
 

yaml_defs/siteConfig.yaml

@@ -1,5 +1,14 @@
 ---
 
+# Version 1.14.0 onwards: The zoomPanPinch yaml provides customization of the zoom-pan-pinch
+# behavior. It can be defined in either panelConfig or siteConfig.
+zoomPanPinch:
+  # This optional term defines the array of keys that can be used to enable wheel zoom. There's
+  # a clash of interest between panel zoom and dashboard scrolling which is easy to avoid with small
+  # SVGs, but becomes more problematic when the SVG is large and covers a lot of the screen. By
+  # requiring a combo such as ALT+Scroll this clash can be avoided. 
+  wheelActivationKeys: ["Alt"]
+
 # These scalars provide a way for grafana variable settings to adjust the threshold
 # limits. They are explained in the panelConfig documentation. These scalar
 # rules across the two files are additive. As in the panelConfig rules are added first, then