From 4d11e8b053e30767c6ee6a0322b3cb185af32f0a Mon Sep 17 00:00:00 2001 From: Alex Simonok Date: Sun, 29 Oct 2023 22:14:25 +0300 Subject: [PATCH] Add Image Scale Algorithm option (#89) * Add Image Scale Algorithm option * Fix tests * Formatting * Update image.ts --------- Co-authored-by: Mikhail --- CHANGELOG.md | 1 + .../ImagePanel/ImagePanel.styles.ts} | 0 src/components/ImagePanel/ImagePanel.tsx | 11 +++++-- src/constants/default.ts | 3 +- src/constants/image.ts | 21 ++++++++++++++ src/module.test.ts | 1 + src/module.ts | 29 +++++++++++++++++-- src/types/panel.ts | 16 ++++++++++ 8 files changed, 77 insertions(+), 5 deletions(-) rename src/{styles.ts => components/ImagePanel/ImagePanel.styles.ts} (100%) diff --git a/CHANGELOG.md b/CHANGELOG.md index af3ca04..732911d 100644 --- 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 b/src/components/ImagePanel/ImagePanel.styles.ts similarity index 100% rename from src/styles.ts rename to src/components/ImagePanel/ImagePanel.styles.ts diff --git a/src/components/ImagePanel/ImagePanel.tsx b/src/components/ImagePanel/ImagePanel.tsx index 03a36c6..625b155 100644 --- 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 = ({ options, data, width, height, repl * Add URL to Image */ let image = ( - + ); if (options.url) { const url = replaceVariables(options.url); diff --git a/src/constants/default.ts b/src/constants/default.ts index 0a4fc87..5100014 100644 --- 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 index 229c737..7ba7137 100644 --- 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 index b19ef46..2963aae 100644 --- 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 index 1cc3b99..f4254d1 100644 --- 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(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(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 index 0415fe7..04580ff 100644 --- 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; }