EditLabelUI not scaling with text

[david-pa]

I am working on a VSCode GLSP project that uses some nodes that have text-based headers. Recently the ability to edit the headers was implemented, but since then it seems that the input fields that pop up when you double click the label are not the right size to fit all of the text you are editing. We use this feature in other spots in the node too, and the input boxes all appear to be the same size regardless of the content being edited.

I did some digging an identified the CSS classes at play are .label-edit input and .label-edit, so I tried playing around with some new CSS rules in the GLSP client, but while they seem to be registered, I can't override the width/height properties:

I think this behavior may also be linked to the setPosition method in the EditLabelUI Sprotty class, but I'm not sure if there's a way to adjust the width and height in such a way that it can dynamically scale with the text that is present. My CSS edits seemed to help when I was investigating via the Developer Tools, but those changes don't stick, as mentioned above.

    protected setPosition(containerElement: HTMLElement) {
        let x = 0;
        let y = 0;
        let width = 100;
        let height = 20;

        if (this.label) {
            const zoom = getZoom(this.label);
            const bounds = getAbsoluteClientBounds(this.label, this.domHelper, this.viewerOptions);
            x = bounds.x + (this.label.editControlPositionCorrection ? this.label.editControlPositionCorrection.x : 0) * zoom;
            y = bounds.y + (this.label.editControlPositionCorrection ? this.label.editControlPositionCorrection.y : 0) * zoom;
            height = (this.label.editControlDimension ? this.label.editControlDimension.height : height) * zoom;
            width = (this.label.editControlDimension ? this.label.editControlDimension.width : width) * zoom;
        }

        containerElement.style.left = `${x}px`;
        containerElement.style.top = `${y}px`;
        containerElement.style.width = `${width}px`;
        this.editControl.style.width = `${width}px`;
        containerElement.style.height = `${height}px`;
        this.editControl.style.height = `${height}px`;
    }

Edit: I would also like to add that the input box doesn't seem to be attached to the node, meaning when you zoom in/out the input box stays at a fixed location and does not scale up/down to match the zoom level. Looking at the HTML in the VSCode Developer Tools, it seems like the EditLabelUI is rendered on top of everything else in the UI, so it's not actually part of the node.

In case it is relevant, here is how the edit ability is being activated in di.config.ts (label:heading should be the node header in the screenshots above):

  configureModelElement(context, 'input:main-container', SCompartment, SCompartmentView);
  configureModelElement(context, 'label', SLabel, SLabelView, {
    enable: [
      editLabelFeature,
      layoutableChildFeature
    ]
  });
  configureModelElement(context, 'label:heading', SLabel, SLabelView, { enable: [
      editLabelFeature,
      layoutableChildFeature
    ] });

[planger]

Hi,

your analysis is spot on and the sizing of the input is indeed defined in the EditLabelUI via an element style. Thus, it unfortunately cannot be overwritten via custom CSS, but only if you customize the EditLabelUi (by rebinding it in your diagram editor and overwrite the setPosition method). This is also what we did in several customer projects to optimize the label editing for certain use cases.

However, at the same time, I guess the generic behavior can be improved. So if you have suggestions for a better generic styling, please let us know or open a PR.

I would also like to add that the input box doesn't seem to be attached to the node, meaning when you zoom in/out the input box stays at a fixed location and does not scale up/down to match the zoom level.

You're right, it is implemented as a UIExtension -- in fact EditLabelUi is a UI extension, which as you say is HTML rendered on top of the diagram. If you'd put it into the SVG directly it would need to be wrapped in a foreign object and would complicate things.

Feel free to suggest any improvements that can be applied generically in the framework! We are happy to review a PR!

[david-pa]

I currently have a new class listed as export class RevisedEditLabelUI extends EditLabelUI, but could you provide an example of how I might go about rebinding? Thank you for all the info so far, it's been very helpful!

[planger]

It should work to do the following in your di.config.ts:

const workflowDiagramModule = new ContainerModule((bind, unbind, isBound, rebind) => {
    // ...
    rebind(EditLabelUI).to(EditLabelUi2);
});

export class EditLabelUi2 extends EditLabelUI {
    protected setPosition(containerElement: HTMLElement): void {
        super.setPosition(containerElement);
        this.editControl.style.width = `${200}px`;
    }
}

Alternatively, you could unload the entire labelEditUiModule module where the EditLabelUI is bound and bind a different implementation in your di.config.ts:

export default function createContainer(widgetId: string): Container {
    const container = createDiagramContainer(workflowDiagramModule, directTaskEditor, filterModule, directConnectToolModule);
    container.unload(labelEditUiModule);
    container.load(myLabelEditUiModule);
    overrideViewerOptions(container, {
        baseDiv: widgetId,
        hiddenDiv: widgetId + '_hidden'
    });
    return container;
}

export const myLabelEditUiModule = new ContainerModule((bind, _unbind, isBound) => {
    const context = { bind, isBound };
    configureActionHandler(context, EditLabelAction.KIND, EditLabelActionHandler);
    bind(EditLabelUi2).toSelf().inSingletonScope();
    bind(TYPES.IUIExtension).toService(EditLabelUi2);
});

export class EditLabelUi2 extends EditLabelUI {
    protected setPosition(containerElement: HTMLElement): void {
        super.setPosition(containerElement);
        this.editControl.style.width = `${200}px`;
    }
}

[david-pa]

@planger I noticed in testing that the text inside the input box can sometimes be oddly large compared to the input box, to the point where it isn't legible, depending on the zoom level. It seems like when I'm really zoomed in the text is small and it's large when zoomed out. I couldn't see a way to impact the text size, so I have been trying to adjust the input box size, but is there a better way?

[planger]

Hm, right, I guess there could be scenarios where the default behavior to identify and apply the styling of the label wouldn't match the input box.

This default behavior is all implemented in the EditLabelUI.applyFontStyling(). So as mentioned above, you can easily customize it. However, I'd like to encourage you to also improve the default implementation, if you find a better strategy to cope with those issues. Thanks in advance!

[david-pa]

I couldn't find a solution to improving the setPosition() method, as the width of the input box is really dependent on the font size of the text inside, which I just referenced manually. I noticed that in the Dev Tools debugger, the label object seems to have a property called size that doesn't seem to compile when used in the Typescript file, but that has a width and height that could probably be used. In my case, the this.label.editControlDimension property was undefined.

For the EditLabelUI.applyFontStyling() method, the reason the font scaling isn't working to well is because there was a regex issue.

protected applyFontStyling() {
        if (this.label) {
            this.labelElement = document.getElementById(this.domHelper.createUniqueDOMElementId(this.label));
            if (this.labelElement) {
                this.labelElement.style.visibility = 'hidden';
                const style = window.getComputedStyle(this.labelElement);
                this.editControl.style.font = style.font;
                this.editControl.style.fontStyle = style.fontStyle;
                this.editControl.style.fontFamily = style.fontFamily;
                this.editControl.style.fontSize = scaledFont(style.fontSize, getZoom(this.label));
                this.editControl.style.fontWeight = style.fontWeight;
                this.editControl.style.lineHeight = style.lineHeight;
            }
        }
    }

It seems that the current implementation uses this code in the scaledFont() function:

function scaledFont(font: string, zoom: number): string {
    return font.replace(/([0-9]+)/, (match) => {
        return String(Number.parseInt(match, 10) * zoom);
    });
}

When it seems you would need something more like this:

function scaledFont(font: string, zoom: number): string {
    return font.replace(/([0-9]+[.]?[0-9]*)/, (match) => {
        return String(Number.parseInt(match, 10) * zoom);
    });
}

Note that the regex used in the original implementation does not account for decimal values. This would cause the resulting "size" value to be something like 123.456.78px (not real data, of course) rather than a normal decimal number format.

[planger]

Thanks for the analysis! Your suggested fix for scaledFont makes sense! May I ask you to open a PR against edit-label-ui.ts? Thank you!

[david-pa]

@planger I attempted to make a PR here, not sure if I did it entirely correctly. Please let me know if there's anything else I need to do.
eclipse-sprotty/sprotty#351