Add Image Scale Algorithm option (#89)

* Add Image Scale Algorithm option * Fix tests * Formatting * Update image.ts --------- Co-authored-by: Mikhail <[email protected]>
VolkovLabs · Oct 29, 2023 · 4d11e8b · 4d11e8b
1 parent 808eb98
commit 4d11e8b
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### Features / Enhancements
 
 - Update ESLint configuration (#84)
+- Add Image Scale Algorithm option (#89)
 
 ## 4.0.0 (2023-06-26)
 

diff --git a/src/styles.ts → ...omponents/ImagePanel/ImagePanel.styles.ts b/src/styles.ts → ...omponents/ImagePanel/ImagePanel.styles.ts
diff --git a/src/components/ImagePanel/ImagePanel.tsx b/src/components/ImagePanel/ImagePanel.tsx
@@ -8,9 +8,9 @@ import { css, cx } from '@emotion/css';
 import { FieldType, PanelProps } from '@grafana/data';
 import { Alert, PageToolbar, ToolbarButton, useStyles2 } from '@grafana/ui';
 import { ImageSizeModes, ImageTypesSymbols, SupportedTypes, TestIds } from '../../constants';
-import { Styles } from '../../styles';
 import { ButtonType, PanelOptions, ZoomType } from '../../types';
 import { base64toBlob } from '../../utils';
+import { Styles } from './ImagePanel.styles';
 
 /**
  * Properties
@@ -313,7 +313,14 @@ export const ImagePanel: React.FC<Props> = ({ options, data, width, height, repl
    * Add URL to Image
    */
   let image = (
-    <img width={imageWidth || ''} height={imageHeight || ''} src={img} data-testid={TestIds.panel.image} alt="" />
+    <img
+      width={imageWidth || ''}
+      height={imageHeight || ''}
+      src={img}
+      data-testid={TestIds.panel.image}
+      alt=""
+      style={{ imageRendering: options.scale }}
+    />
   );
   if (options.url) {
     const url = replaceVariables(options.url);

diff --git a/src/constants/default.ts b/src/constants/default.ts
@@ -1,4 +1,4 @@
-import { PanelOptions, ZoomType } from '../types';
+import { ImageScale, PanelOptions, ZoomType } from '../types';
 import { ImageSizeModes } from './image';
 
 /**
@@ -20,4 +20,5 @@ export const DefaultOptions: PanelOptions = {
   widthMode: ImageSizeModes.AUTO,
   widthName: '',
   zoomType: ZoomType.DEFAULT,
+  scale: ImageScale.AUTO,
 };
diff --git a/src/constants/image.ts b/src/constants/image.ts
@@ -1,3 +1,5 @@
+import { ImageScale } from '../types';
+
 /**
  * Image Types
  */
@@ -50,3 +52,22 @@ export const SizeModeOptions = [
   { value: ImageSizeModes.ORIGINAL, label: 'Original' },
   { value: ImageSizeModes.CUSTOM, label: 'Custom' },
 ];
+
+/**
+ * Image Scale Options
+ */
+export const ImageScaleOptions = [
+  { value: ImageScale.AUTO, label: 'Auto' },
+  {
+    value: ImageScale.CRISP_EDGES,
+    label: 'Crisp Edges',
+    description:
+      'The image is scaled with an algorithm that preserves contrast and edges in the image. Generally intended for images such as pixel art or line drawings, no blurring or color smoothing occurs.',
+  },
+  {
+    value: ImageScale.PIXELATED,
+    label: 'Pixelated',
+    description:
+      'The image is scaled with the "nearest neighbor" or similar algorithm, preserving a "pixelated" look as the image changes in size.',
+  },
+];
diff --git a/src/module.test.ts b/src/module.test.ts
@@ -28,6 +28,7 @@ describe('plugin', () => {
     addRadio: jest.fn().mockImplementation(() => builder),
     addTextInput: jest.fn().mockImplementation(() => builder),
     addMultiSelect: jest.fn().mockImplementation(() => builder),
+    addSelect: jest.fn().mockImplementation(() => builder),
   };
 
   it('Should be instance of PanelPlugin', () => {

diff --git a/src/module.ts b/src/module.ts
@@ -1,6 +1,13 @@
 import { Field, FieldType, PanelPlugin } from '@grafana/data';
 import { ImagePanel } from './components';
-import { ButtonsOptions, DefaultOptions, ImageSizeModes, SizeModeOptions, ZoomOptions } from './constants';
+import {
+  ButtonsOptions,
+  DefaultOptions,
+  ImageScaleOptions,
+  ImageSizeModes,
+  SizeModeOptions,
+  ZoomOptions,
+} from './constants';
 import { ButtonType, PanelOptions } from './types';
 
 /**
@@ -26,7 +33,12 @@ export const plugin = new PanelPlugin<PanelOptions>(ImagePanel).setNoPadding().s
         filter: (f: Field) => f.type === FieldType.string,
         noFieldsMessage: 'No strings fields found',
       },
-    })
+    });
+
+  /**
+   * ToolBar
+   */
+  builder
     .addRadio({
       path: 'toolbar',
       name: 'Images and PDF only.',
@@ -140,6 +152,19 @@ export const plugin = new PanelPlugin<PanelOptions>(ImagePanel).setNoPadding().s
       showIf: (options: PanelOptions) => options.heightMode === ImageSizeModes.CUSTOM,
     });
 
+  /**
+   * Image
+   */
+  builder.addSelect({
+    path: 'scale',
+    name: 'Scale Algorithm',
+    category: ['Image'],
+    settings: {
+      options: ImageScaleOptions,
+    },
+    defaultValue: DefaultOptions.scale,
+  });
+
   /**
    * Video / Audio
    */

diff --git a/src/types/panel.ts b/src/types/panel.ts
@@ -1,6 +1,15 @@
 import { ImageSizeModes } from '../constants';
 import { ButtonType, ZoomType } from './toolbar';
 
+/**
+ * Image Scale
+ */
+export enum ImageScale {
+  AUTO = 'auto',
+  CRISP_EDGES = 'crisp-edges',
+  PIXELATED = 'pixelated',
+}
+
 /**
  * Options
  */
@@ -109,4 +118,11 @@ export interface PanelOptions {
    * @type {ZoomType}
    */
   zoomType: ZoomType;
+
+  /**
+   * Scale
+   *
+   * @type {ImageScale}
+   */
+  scale: ImageScale;
 }