mirror of
https://github.com/grafana/grafana.git
synced 2025-02-13 00:55:47 -06:00
935334cbda
* Playing around * This is getting interesting * Updates * Updated * Observable experiments * This is tricky * VizPanel panel renderer * New model progress * Maybe this could be something * Updated * Rename * updates * Updated * Query runners? not sure * Updated * updates * flex box layout starting to work * Testing * Tested an action * Parent context sort of working * Progress * Progress * Updated * Starting to work * Things are working * Scene list, nested scene demo * Progress on repeats * Moving things * Pretty big progress * More things working * Great progress * Progress * Name changing * Minor tweaks * Simplified sizing * Move toggleDirection to SceneFlexLayout * add feature flag (#50990) * removed new useObservable hook * Rename folder and feature toggle to scenes * Caching scenes so you can go back to another scene without having to re-query data * Fix issue with subs on re-mount * Fixing test * Added SceneCanvasText to play around with layout elements with size based on content * Scene: Edit mode and component edit wrapper that handles selection (#51078) * First step for scene variables * Started playing around with a scene edit mode * Better way to set component * Progress on edit mode * Update * Progress on edit mode * Progress on editor * Progress on editor * Updates * More working * Progress * Minor update * removed unnessary file * Moving things around * Updated * Making time range separate from time picker * minor rename of methods * The most basic variable start * Minor renames * Fixed interpolate issue if not found at closest level * An embryo of event model and url sync handling * Update url sync types * Removed unnessary any type arg Co-authored-by: Ryan McKinley <ryantxu@gmail.com> Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>
45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import React, { CSSProperties } from 'react';
|
|
|
|
import { Field, Input } from '@grafana/ui';
|
|
|
|
import { SceneObjectBase } from '../core/SceneObjectBase';
|
|
import { SceneComponentProps, SceneObjectState } from '../core/types';
|
|
|
|
export interface SceneCanvasTextState extends SceneObjectState {
|
|
text: string;
|
|
fontSize?: number;
|
|
align?: 'left' | 'center' | 'right';
|
|
}
|
|
|
|
export class SceneCanvasText extends SceneObjectBase<SceneCanvasTextState> {
|
|
static Editor = Editor;
|
|
static Component = ({ model }: SceneComponentProps<SceneCanvasText>) => {
|
|
const { text, fontSize = 20, align = 'left' } = model.useState();
|
|
|
|
const style: CSSProperties = {
|
|
fontSize: fontSize,
|
|
display: 'flex',
|
|
flexGrow: 1,
|
|
alignItems: 'center',
|
|
padding: 16,
|
|
justifyContent: align,
|
|
};
|
|
|
|
return <div style={style}>{text}</div>;
|
|
};
|
|
}
|
|
|
|
function Editor({ model }: SceneComponentProps<SceneCanvasText>) {
|
|
const { fontSize } = model.useState();
|
|
|
|
return (
|
|
<Field label="Font size">
|
|
<Input
|
|
type="number"
|
|
defaultValue={fontSize}
|
|
onBlur={(evt) => model.setState({ fontSize: parseInt(evt.currentTarget.value, 10) })}
|
|
/>
|
|
</Field>
|
|
);
|
|
}
|