root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 176 Packages Projects Releases Wiki Activity

Canvas: Improve changing element options UX (#49555)

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() { reinitializeMoveable() {
// Need to first clear current selection and then re-init moveable with slight delay // Need to first clear current selection and then re-init moveable with slight delay
this.scene.clearCurrentSelection(); 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? // ??? 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.currentLayer = this.root;
this.selection.next([]); this.selection.next([]);
} }
}, 100); });
return this.root; return this.root;
} }
@ -226,7 +226,7 @@ export class Scene {
if (this.div) { if (this.div) {
this.initMoveable(true, this.isEditingEnabled); 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 { options } = element;
const { placement, constraint: layout } = options; const { placement, constraint: layout } = options;
const reselectElementAfterChange = () => {
setTimeout(() => {
settings.scene.select({ targets: [element.div!] });
});
};
const onHorizontalConstraintSelect = (h: SelectableValue<HorizontalConstraint>) => { const onHorizontalConstraintSelect = (h: SelectableValue<HorizontalConstraint>) => {
onHorizontalConstraintChange(h.value!); onHorizontalConstraintChange(h.value!);
}; };
@ -57,6 +63,7 @@ export const PlacementEditor: FC<StandardEditorProps<any, CanvasEditorOptions, P
element.setPlacementFromConstraint(); element.setPlacementFromConstraint();
settings.scene.revId++; settings.scene.revId++;
settings.scene.save(true); settings.scene.save(true);
reselectElementAfterChange();
}; };
const onVerticalConstraintSelect = (v: SelectableValue<VerticalConstraint>) => { const onVerticalConstraintSelect = (v: SelectableValue<VerticalConstraint>) => {
@ -68,16 +75,14 @@ export const PlacementEditor: FC<StandardEditorProps<any, CanvasEditorOptions, P
element.setPlacementFromConstraint(); element.setPlacementFromConstraint();
settings.scene.revId++; settings.scene.revId++;
settings.scene.save(true); settings.scene.save(true);
reselectElementAfterChange();
}; };
const onPositionChange = (value: number | undefined, placement: keyof Placement) => { const onPositionChange = (value: number | undefined, placement: keyof Placement) => {
element.options.placement![placement] = value ?? element.options.placement![placement]; element.options.placement![placement] = value ?? element.options.placement![placement];
element.applyLayoutStylesToDiv(); element.applyLayoutStylesToDiv();
settings.scene.clearCurrentSelection(true); settings.scene.clearCurrentSelection(true);
// TODO: This needs to have a better sync method with where div is reselectElementAfterChange();
setTimeout(() => {
settings.scene.select({ targets: [element.div!] });
}, 100);
}; };
const constraint = element.tempConstraint ?? layout ?? {}; const constraint = element.tempConstraint ?? layout ?? {};