compact the UI for long entity ids

This commit is contained in:
Val Erastov 2022-06-05 14:14:56 -07:00
parent a9f2b893a3
commit 8b6ebe21ec

View file

@ -33,7 +33,7 @@ export function ModelButtonBehavior({children, model, controlVisibility}: {
const highlights = useStream(ctx => ctx.highlightService.highlighted$);
let typeLabel = model.TYPE as string;
let idLabel = model.id;
let idLabel: string = model.id;
let visibilityOf = model;
if (model instanceof MSketchObject) {
typeLabel = model.sketchPrimitive.constructor.name
@ -50,7 +50,8 @@ export function ModelButtonBehavior({children, model, controlVisibility}: {
const onMouseLeave= () => ctx.highlightService.unHighlight(model.id);
const label = <>
<ModelIcon entityType={model.TYPE} style={{marginRight: 5}} /> {typeLabel} {idLabel}
<ModelIcon entityType={model.TYPE} style={{marginRight: 5}} />
<SafeLength text={idLabel} />
</>;
const controls = <>
@ -67,3 +68,15 @@ export function ModelButtonBehavior({children, model, controlVisibility}: {
onMouseLeave
});
}
function SafeLength(props: { text: string }): any {
const limit = 40;
const mid = limit / 2;
const text = props.text;
if (text.length > limit) {
return <span title={text}>{text.substring(0, mid)}...{text.substring(text.length - mid, text.length)}</span>;
} else {
return text;
}
}