From 5797fbc0b2475352a9d080e1433cb9f92bb6c9de Mon Sep 17 00:00:00 2001 From: Adela Almasan <88068998+adela-almasan@users.noreply.github.com> Date: Mon, 1 Aug 2022 15:34:05 -0500 Subject: [PATCH] Canvas: Cleanup default elements (#52958) --- .betterer.results | 4 + public/app/features/canvas/element.ts | 3 + .../app/features/canvas/elements/button.tsx | 19 ++++- .../features/canvas/elements/droneFront.tsx | 25 ++++-- .../features/canvas/elements/droneSide.tsx | 25 ++++-- .../app/features/canvas/elements/droneTop.tsx | 9 ++- public/app/features/canvas/elements/icon.tsx | 77 ++++++++++--------- .../app/features/canvas/elements/textBox.tsx | 17 ++-- .../features/canvas/elements/windTurbine.tsx | 17 +++- public/app/features/canvas/registry.ts | 14 ++-- .../app/features/canvas/runtime/element.tsx | 3 + public/app/features/canvas/runtime/scene.tsx | 13 +++- .../app/plugins/panel/canvas/CanvasPanel.tsx | 13 +++- .../canvas/editor/TreeNavigationEditor.tsx | 10 +-- .../panel/canvas/editor/elementEditor.tsx | 29 ++++--- public/app/plugins/panel/canvas/models.gen.ts | 2 + public/app/plugins/panel/canvas/module.tsx | 7 ++ public/app/plugins/panel/canvas/utils.ts | 12 +++ 18 files changed, 205 insertions(+), 94 deletions(-) diff --git a/.betterer.results b/.betterer.results index 0c76dc3e802..b561c1e0935 100644 --- a/.betterer.results +++ b/.betterer.results @@ -8636,6 +8636,10 @@ exports[`better eslint`] = { [0, 0, 0, "Do not use any type assertions.", "4"], [0, 0, 0, "Unexpected any. Specify a different type.", "5"] ], + "public/app/plugins/panel/canvas/utils.ts:5381": [ + [0, 0, 0, "Unexpected any. Specify a different type.", "0"], + [0, 0, 0, "Unexpected any. Specify a different type.", "1"] + ], "public/app/plugins/panel/dashlist/module.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], diff --git a/public/app/features/canvas/element.ts b/public/app/features/canvas/element.ts index 16c018e023b..9f2afee3f40 100644 --- a/public/app/features/canvas/element.ts +++ b/public/app/features/canvas/element.ts @@ -55,3 +55,6 @@ export interface CanvasElementItem extends RegistryI /** Build the configuration UI */ registerOptionsUI?: PanelOptionsSupplier>; } + +export const defaultBgColor = '#D9D9D9'; +export const defaultTextColor = '#000000'; diff --git a/public/app/features/canvas/elements/button.tsx b/public/app/features/canvas/elements/button.tsx index 1aebc39d5f9..0be89ccbb23 100644 --- a/public/app/features/canvas/elements/button.tsx +++ b/public/app/features/canvas/elements/button.tsx @@ -6,7 +6,7 @@ import { TextDimensionEditor } from 'app/features/dimensions/editors/TextDimensi import { TextDimensionConfig } from 'app/features/dimensions/types'; import { APIEditor, APIEditorConfig, callApi } from 'app/plugins/panel/canvas/editor/APIEditor'; -import { CanvasElementItem, CanvasElementProps } from '../element'; +import { CanvasElementItem, CanvasElementProps, defaultBgColor } from '../element'; interface ButtonData { text?: string; @@ -28,7 +28,7 @@ class ButtonDisplay extends PureComponent + ); @@ -43,12 +43,23 @@ export const buttonItem: CanvasElementItem = { display: ButtonDisplay, defaultSize: { - width: 200, - height: 50, + width: 32, + height: 32, }, getNewOptions: (options) => ({ ...options, + background: { + color: { + fixed: 'transparent', + }, + }, + placement: { + width: 32, + height: 32, + top: 0, + left: 0, + }, }), // Called when data changes diff --git a/public/app/features/canvas/elements/droneFront.tsx b/public/app/features/canvas/elements/droneFront.tsx index 8de1e1b7ae9..b0a29355812 100644 --- a/public/app/features/canvas/elements/droneFront.tsx +++ b/public/app/features/canvas/elements/droneFront.tsx @@ -6,7 +6,7 @@ import { useStyles2 } from '@grafana/ui'; import { DimensionContext, ScalarDimensionConfig } from 'app/features/dimensions'; import { ScalarDimensionEditor } from 'app/features/dimensions/editors'; -import { CanvasElementItem, CanvasElementProps } from '../element'; +import { CanvasElementItem, CanvasElementProps, defaultBgColor } from '../element'; interface DroneFrontData { rollAngle?: number; @@ -29,22 +29,22 @@ const DroneFrontDisplay: FC xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 1300 290" - style={{ transform: droneFrontTransformStyle }} + style={{ transform: droneFrontTransformStyle, stroke: defaultBgColor }} > - + - + - + d=" M 1050 60 L 980 60 L 980 230 L 990 290 L 1040 290 L 1050 230 L 1050 60 Z " /> - + = { defaultSize: { width: 100, - height: 100, + height: 26, }, getNewOptions: (options) => ({ ...options, + background: { + color: { + fixed: 'transparent', + }, + }, + placement: { + width: options?.placement?.width ?? 100, + height: options?.placement?.height ?? 26, + top: options?.placement?.top, + left: options?.placement?.left, + }, }), // Called when data changes diff --git a/public/app/features/canvas/elements/droneSide.tsx b/public/app/features/canvas/elements/droneSide.tsx index 309f3673a55..71366a67a15 100644 --- a/public/app/features/canvas/elements/droneSide.tsx +++ b/public/app/features/canvas/elements/droneSide.tsx @@ -6,7 +6,7 @@ import { useStyles2 } from '@grafana/ui'; import { DimensionContext, ScalarDimensionConfig } from 'app/features/dimensions'; import { ScalarDimensionEditor } from 'app/features/dimensions/editors'; -import { CanvasElementItem, CanvasElementProps } from '../element'; +import { CanvasElementItem, CanvasElementProps, defaultBgColor } from '../element'; interface DroneSideData { pitchAngle?: number; @@ -29,21 +29,21 @@ const DroneSideDisplay: FC> = xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 1300 290" - style={{ transform: droneSidePitchTransformStyle }} + style={{ transform: droneSidePitchTransformStyle, stroke: defaultBgColor }} > - + - + - + > = d=" M 1050 60 L 980 60 L 980 230 L 990 290 L 1040 290 L 1050 230 L 1050 60 Z " /> - + = { defaultSize: { width: 100, - height: 100, + height: 26, }, getNewOptions: (options) => ({ ...options, + background: { + color: { + fixed: 'transparent', + }, + }, + placement: { + width: options?.placement?.width ?? 100, + height: options?.placement?.height ?? 26, + top: options?.placement?.top, + left: options?.placement?.left, + }, }), // Called when data changes diff --git a/public/app/features/canvas/elements/droneTop.tsx b/public/app/features/canvas/elements/droneTop.tsx index abac83dee8c..f9be7552923 100644 --- a/public/app/features/canvas/elements/droneTop.tsx +++ b/public/app/features/canvas/elements/droneTop.tsx @@ -6,7 +6,7 @@ import { useStyles2 } from '@grafana/ui'; import { DimensionContext, ScalarDimensionConfig } from 'app/features/dimensions'; import { ScalarDimensionEditor } from 'app/features/dimensions/editors'; -import { CanvasElementItem, CanvasElementProps } from '../element'; +import { CanvasElementItem, CanvasElementProps, defaultBgColor } from '../element'; interface DroneTopData { bRightRotorRPM?: number; @@ -45,7 +45,7 @@ const DroneTopDisplay: FC> = (p xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="-43 -43 640 640" xmlSpace="preserve" - style={{ transform: droneTopTransformStyle }} + style={{ transform: droneTopTransformStyle, fill: defaultBgColor }} > = { getNewOptions: (options) => ({ ...options, + background: { + color: { + fixed: 'transparent', + }, + }, }), // Called when data changes diff --git a/public/app/features/canvas/elements/icon.tsx b/public/app/features/canvas/elements/icon.tsx index fcce5a89429..cb94877d5b6 100644 --- a/public/app/features/canvas/elements/icon.tsx +++ b/public/app/features/canvas/elements/icon.tsx @@ -11,9 +11,9 @@ import { } from 'app/features/dimensions'; import { DimensionContext } from 'app/features/dimensions/context'; import { ColorDimensionEditor, ResourceDimensionEditor } from 'app/features/dimensions/editors'; -import { APIEditor, APIEditorConfig, callApi } from 'app/plugins/panel/canvas/editor/APIEditor'; +import { APIEditorConfig, callApi } from 'app/plugins/panel/canvas/editor/APIEditor'; -import { CanvasElementItem, CanvasElementProps } from '../element'; +import { CanvasElementItem, CanvasElementProps, defaultBgColor } from '../element'; import { LineConfig } from '../types'; export interface IconConfig { @@ -75,8 +75,8 @@ export const iconItem: CanvasElementItem = { getNewOptions: (options) => ({ placement: { - width: 50, - height: 50, + width: 100, + height: 100, top: 0, left: 0, }, @@ -86,7 +86,12 @@ export const iconItem: CanvasElementItem = { mode: ResourceDimensionMode.Fixed, fixed: 'img/icons/unicons/question-circle.svg', }, - fill: { fixed: '#FFF899' }, + fill: { fixed: defaultBgColor }, + }, + background: { + color: { + fixed: 'transparent', + }, }, }), @@ -102,7 +107,7 @@ export const iconItem: CanvasElementItem = { const data: IconData = { path, - fill: cfg.fill ? ctx.getColor(cfg.fill).value() : '#CCC', + fill: cfg.fill ? ctx.getColor(cfg.fill).value() : defaultBgColor, api: cfg?.api ?? undefined, }; @@ -140,36 +145,36 @@ export const iconItem: CanvasElementItem = { // Configured values fixed: 'grey', }, - }) - .addSliderInput({ - category, - path: 'config.stroke.width', - name: 'Stroke', - defaultValue: 0, - settings: { - min: 0, - max: 10, - }, - }) - .addCustomEditor({ - category, - id: 'config.stroke.color', - path: 'config.stroke.color', - name: 'Stroke color', - editor: ColorDimensionEditor, - settings: {}, - defaultValue: { - // Configured values - fixed: 'grey', - }, - showIf: (cfg) => Boolean(cfg?.config?.stroke?.width), - }) - .addCustomEditor({ - category, - id: 'apiSelector', - path: 'config.api', - name: 'API', - editor: APIEditor, }); + // .addSliderInput({ + // category, + // path: 'config.stroke.width', + // name: 'Stroke', + // defaultValue: 0, + // settings: { + // min: 0, + // max: 10, + // }, + // }) + // .addCustomEditor({ + // category, + // id: 'config.stroke.color', + // path: 'config.stroke.color', + // name: 'Stroke color', + // editor: ColorDimensionEditor, + // settings: {}, + // defaultValue: { + // // Configured values + // fixed: 'grey', + // }, + // showIf: (cfg) => Boolean(cfg?.config?.stroke?.width), + // }) + // .addCustomEditor({ + // category, + // id: 'apiSelector', + // path: 'config.api', + // name: 'API', + // editor: APIEditor, + // }); }, }; diff --git a/public/app/features/canvas/elements/textBox.tsx b/public/app/features/canvas/elements/textBox.tsx index e8f237a8183..b1197e15024 100644 --- a/public/app/features/canvas/elements/textBox.tsx +++ b/public/app/features/canvas/elements/textBox.tsx @@ -9,7 +9,7 @@ import { ColorDimensionEditor } from 'app/features/dimensions/editors/ColorDimen import { TextDimensionEditor } from 'app/features/dimensions/editors/TextDimensionEditor'; import { ColorDimensionConfig, TextDimensionConfig } from 'app/features/dimensions/types'; -import { CanvasElementItem, CanvasElementProps } from '../element'; +import { CanvasElementItem, CanvasElementProps, defaultBgColor, defaultTextColor } from '../element'; export enum Align { Left = 'left', @@ -78,15 +78,18 @@ export const textBoxItem: CanvasElementItem = { }, getNewOptions: (options) => ({ - background: { - color: { - fixed: 'grey', - }, - }, ...options, config: { - align: Align.Left, + align: Align.Center, valign: VAlign.Middle, + color: { + fixed: defaultTextColor, + }, + }, + background: { + color: { + fixed: defaultBgColor, + }, }, }), diff --git a/public/app/features/canvas/elements/windTurbine.tsx b/public/app/features/canvas/elements/windTurbine.tsx index afcf65b39f8..f606c91bd62 100644 --- a/public/app/features/canvas/elements/windTurbine.tsx +++ b/public/app/features/canvas/elements/windTurbine.tsx @@ -6,7 +6,7 @@ import { useStyles2 } from '@grafana/ui'; import { DimensionContext, ScalarDimensionConfig } from 'app/features/dimensions'; import { ScalarDimensionEditor } from 'app/features/dimensions/editors'; -import { CanvasElementItem, CanvasElementProps } from '../element'; +import { CanvasElementItem, CanvasElementProps, defaultBgColor } from '../element'; interface WindTurbineData { rpm?: number; @@ -24,7 +24,7 @@ const WindTurbineDisplay: FC + = { defaultSize: { width: 100, - height: 100, + height: 155, }, getNewOptions: (options) => ({ ...options, + background: { + color: { + fixed: 'transparent', + }, + }, + placement: { + width: options?.placement?.width ?? 100, + height: options?.placement?.height ?? 155, + top: options?.placement?.top, + left: options?.placement?.left, + }, }), // Called when data changes diff --git a/public/app/features/canvas/registry.ts b/public/app/features/canvas/registry.ts index 450d0cc480f..719dfc54d80 100644 --- a/public/app/features/canvas/registry.ts +++ b/public/app/features/canvas/registry.ts @@ -15,12 +15,14 @@ export const DEFAULT_CANVAS_ELEMENT_CONFIG: CanvasElementOptions = { name: `Element 1`, }; -export const canvasElementRegistry = new Registry(() => [ +export const defaultElementItems = [ iconItem, // default for now textBoxItem, - buttonItem, - droneTopItem, - droneFrontItem, - droneSideItem, - windTurbineItem, +]; + +const advancedElementItems = [buttonItem, windTurbineItem, droneTopItem, droneFrontItem, droneSideItem]; + +export const canvasElementRegistry = new Registry(() => [ + ...defaultElementItems, + ...advancedElementItems, ]); diff --git a/public/app/features/canvas/runtime/element.tsx b/public/app/features/canvas/runtime/element.tsx index 6fc7b7a0938..d2b0e0a04b9 100644 --- a/public/app/features/canvas/runtime/element.tsx +++ b/public/app/features/canvas/runtime/element.tsx @@ -46,6 +46,7 @@ export class ElementState implements LayerElement { horizontal: HorizontalConstraint.Left, }; options.placement = options.placement ?? { width: 100, height: 100, top: 0, left: 0 }; + options.background = options.background ?? { color: { fixed: 'transparent' } }; const scene = this.getScene(); if (!options.name) { const newName = scene?.getNextElementName(); @@ -321,6 +322,8 @@ export class ElementState implements LayerElement { css.backgroundSize = '100% 100%'; break; } + } else { + css.backgroundImage = ''; } } } diff --git a/public/app/features/canvas/runtime/scene.tsx b/public/app/features/canvas/runtime/scene.tsx index a32b9ecde1e..3d434378063 100644 --- a/public/app/features/canvas/runtime/scene.tsx +++ b/public/app/features/canvas/runtime/scene.tsx @@ -59,6 +59,7 @@ export class Scene { div?: HTMLDivElement; currentLayer?: FrameState; isEditingEnabled?: boolean; + shouldShowAdvancedTypes?: boolean; skipNextSelectionBroadcast = false; ignoreDataUpdate = false; @@ -66,8 +67,13 @@ export class Scene { inlineEditingCallback?: () => void; - constructor(cfg: CanvasFrameOptions, enableEditing: boolean, public onSave: (cfg: CanvasFrameOptions) => void) { - this.root = this.load(cfg, enableEditing); + constructor( + cfg: CanvasFrameOptions, + enableEditing: boolean, + showAdvancedTypes: boolean, + public onSave: (cfg: CanvasFrameOptions) => void + ) { + this.root = this.load(cfg, enableEditing, showAdvancedTypes); } getNextElementName = (isFrame = false) => { @@ -89,7 +95,7 @@ export class Scene { return !this.byName.has(v); }; - load(cfg: CanvasFrameOptions, enableEditing: boolean) { + load(cfg: CanvasFrameOptions, enableEditing: boolean, showAdvancedTypes: boolean) { this.root = new RootElement( cfg ?? { type: 'frame', @@ -100,6 +106,7 @@ export class Scene { ); this.isEditingEnabled = enableEditing; + this.shouldShowAdvancedTypes = showAdvancedTypes; setTimeout(() => { if (this.div) { diff --git a/public/app/plugins/panel/canvas/CanvasPanel.tsx b/public/app/plugins/panel/canvas/CanvasPanel.tsx index 161997dd609..aa08d7b5827 100644 --- a/public/app/plugins/panel/canvas/CanvasPanel.tsx +++ b/public/app/plugins/panel/canvas/CanvasPanel.tsx @@ -52,7 +52,12 @@ export class CanvasPanel extends Component { // Only the initial options are ever used. // later changes are all controlled by the scene - this.scene = new Scene(this.props.options.root, this.props.options.inlineEditing, this.onUpdateScene); + this.scene = new Scene( + this.props.options.root, + this.props.options.inlineEditing, + this.props.options.showAdvancedTypes, + this.onUpdateScene + ); this.scene.updateSize(props.width, props.height); this.scene.updateData(props.data); this.scene.inlineEditingCallback = this.openInlineEdit; @@ -154,9 +159,11 @@ export class CanvasPanel extends Component { // After editing, the options are valid, but the scene was in a different panel or inline editing mode has changed const shouldUpdateSceneAndPanel = this.needsReload && this.props.options !== nextProps.options; const inlineEditingSwitched = this.props.options.inlineEditing !== nextProps.options.inlineEditing; - if (shouldUpdateSceneAndPanel || inlineEditingSwitched) { + const shouldShowAdvancedTypesSwitched = + this.props.options.showAdvancedTypes !== nextProps.options.showAdvancedTypes; + if (shouldUpdateSceneAndPanel || inlineEditingSwitched || shouldShowAdvancedTypesSwitched) { this.needsReload = false; - this.scene.load(nextProps.options.root, nextProps.options.inlineEditing); + this.scene.load(nextProps.options.root, nextProps.options.inlineEditing, nextProps.options.showAdvancedTypes); this.scene.updateSize(nextProps.width, nextProps.height); this.scene.updateData(nextProps.data); changed = true; diff --git a/public/app/plugins/panel/canvas/editor/TreeNavigationEditor.tsx b/public/app/plugins/panel/canvas/editor/TreeNavigationEditor.tsx index f77e68c816c..9624b71fd18 100644 --- a/public/app/plugins/panel/canvas/editor/TreeNavigationEditor.tsx +++ b/public/app/plugins/panel/canvas/editor/TreeNavigationEditor.tsx @@ -15,7 +15,7 @@ import { getGlobalStyles } from '../globalStyles'; import { PanelOptions } from '../models.gen'; import { getTreeData, onNodeDrop, TreeElement } from '../tree'; import { DragNode, DropNode } from '../types'; -import { doSelect } from '../utils'; +import { doSelect, getElementTypes } from '../utils'; import { TreeNodeTitle } from './TreeNodeTitle'; import { TreeViewEditorProps } from './elementEditor'; @@ -133,6 +133,8 @@ export const TreeNavigationEditor = ({ item }: StandardEditorProps @@ -156,11 +158,7 @@ export const TreeNavigationEditor = ({ item }: StandardEditorProps
- +
{selection.length > 0 && (