IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-18 20:43:26 -06:00
Code Issues Packages Projects Releases Wiki Activity

Canvas: Improve changing element options UX (#49555)

Browse Source
This commit is contained in:
Nathan Marrs 2022-05-25 10:21:51 -07:00 committed by GitHub
parent caa49f8d14
commit 2449f62dbe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/features/canvas/runtime/frame.tsx
View File

@ -89,7 +89,7 @@ export class FrameState extends ElementState {
reinitializeMoveable() {
// Need to first clear current selection and then re-init moveable with slight delay
this.scene.clearCurrentSelection();
setTimeout(() => this.scene.initMoveable(true, this.scene.isEditingEnabled), 100);
setTimeout(() => this.scene.initMoveable(true, this.scene.isEditingEnabled));
}
// ??? or should this be on the element directly?

4
public/app/features/canvas/runtime/scene.tsx
View File

@ -106,7 +106,7 @@ export class Scene {
this.currentLayer = this.root;
this.selection.next([]);
}
}, 100);
});
return this.root;
}
@ -226,7 +226,7 @@ export class Scene {
if (this.div) {
this.initMoveable(true, this.isEditingEnabled);
}
}, 100);
});
}
};

13
public/app/plugins/panel/canvas/editor/PlacementEditor.tsx
View File

@ -48,6 +48,12 @@ export const PlacementEditor: FC<StandardEditorProps<any, CanvasEditorOptions, P
const { options } = element;
const { placement, constraint: layout } = options;
const reselectElementAfterChange = () => {
setTimeout(() => {
settings.scene.select({ targets: [element.div!] });
});
};
const onHorizontalConstraintSelect = (h: SelectableValue<HorizontalConstraint>) => {
onHorizontalConstraintChange(h.value!);
};
@ -57,6 +63,7 @@ export const PlacementEditor: FC<StandardEditorProps<any, CanvasEditorOptions, P
element.setPlacementFromConstraint();
settings.scene.revId++;
settings.scene.save(true);
reselectElementAfterChange();
};
const onVerticalConstraintSelect = (v: SelectableValue<VerticalConstraint>) => {
@ -68,16 +75,14 @@ export const PlacementEditor: FC<StandardEditorProps<any, CanvasEditorOptions, P
element.setPlacementFromConstraint();
settings.scene.revId++;
settings.scene.save(true);
reselectElementAfterChange();
};
const onPositionChange = (value: number | undefined, placement: keyof Placement) => {
element.options.placement![placement] = value ?? element.options.placement![placement];
element.applyLayoutStylesToDiv();
settings.scene.clearCurrentSelection(true);
// TODO: This needs to have a better sync method with where div is
setTimeout(() => {
settings.scene.select({ targets: [element.div!] });
}, 100);
reselectElementAfterChange();
};
const constraint = element.tempConstraint ?? layout ?? {};