@eclipse-glsp/client 1.1.0-next.fdfeeeb.193 → 2.0.0

package/src/features/bounds/hbox-layout.ts

@@ -0,0 +1,275 @@
+/********************************************************************************
+ * Copyright (c) 2021-2023 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+import { injectable } from 'inversify';
+import {
+    Bounds,
+    BoundsData,
+    Dimension,
+    GChildElement,
+    HBoxLayoutOptions,
+    HBoxLayouter,
+    LayoutContainer,
+    Point,
+    GModelElement,
+    GParentElement,
+    StatefulLayouter,
+    isBoundsAware,
+    isLayoutableChild
+} from '@eclipse-glsp/sprotty';
+
+export interface HBoxLayoutOptionsExt extends HBoxLayoutOptions {
+    hGrab: boolean;
+    vGrab: boolean;
+    prefWidth: number | null;
+    prefHeight: number | null;
+}
+
+/**
+ * Extends HBoxLayouter to support additional layout options
+ */
+@injectable()
+export class HBoxLayouterExt extends HBoxLayouter {
+    static override KIND = HBoxLayouter.KIND;
+
+    override layout(container: GParentElement & LayoutContainer, layouter: StatefulLayouter): void {
+        const boundsData = layouter.getBoundsData(container);
+        const options = this.getLayoutOptions(container);
+        const childrenSize = this.getChildrenSize(container, options, layouter);
+
+        const fixedSize = this.getFixedContainerBounds(container, options, layouter);
+
+        const currentWidth = boundsData.bounds ? boundsData.bounds?.width - options.paddingLeft - options.paddingRight : 0;
+        const currentHeight = boundsData.bounds ? boundsData.bounds?.height - options.paddingTop - options.paddingBottom : 0;
+
+        const maxWidth =
+            options.paddingFactor *
+            (options.resizeContainer
+                ? Math.max(fixedSize.width - options.paddingLeft - options.paddingRight, childrenSize.width)
+                : Math.max(0, fixedSize.width - options.paddingLeft - options.paddingRight));
+        const maxHeight =
+            options.paddingFactor *
+            (options.resizeContainer
+                ? Math.max(fixedSize.height - options.paddingTop - options.paddingBottom, childrenSize.height)
+                : Math.max(0, fixedSize.height - options.paddingTop - options.paddingBottom));
+
+        const width = Math.max(currentWidth, maxWidth);
+        const height = Math.max(currentHeight, maxHeight);
+
+        // Remaining size that can be grabbed by children with the hGrab option
+        const grabWidth = width - childrenSize.width;
+        // Number of children that request hGrab
+        // FIXME: This approach works fine when only 1 child uses HGrab, but may cause rounding issues
+        // when the grabHeight can't be equally shared by all children.
+        const grabbingChildren = container.children
+            .map(child => this.getChildLayoutOptions(child, options))
+            .filter(opt => opt.hGrab).length;
+
+        if (width > 0 && height > 0) {
+            const offset = this.layoutChildren(container, layouter, options, width, height, grabWidth, grabbingChildren);
+            boundsData.bounds = this.getFinalContainerBounds(container, offset, options, childrenSize.width, childrenSize.height);
+            boundsData.boundsChanged = true;
+        }
+    }
+
+    protected override getChildrenSize(
+        container: GParentElement & LayoutContainer,
+        containerOptions: HBoxLayoutOptionsExt,
+        layouter: StatefulLayouter
+    ): Dimension {
+        let maxWidth = 0;
+        let maxHeight = -1;
+        let isFirst = true;
+        container.children.forEach(child => {
+            if (isLayoutableChild(child)) {
+                const bounds = layouter.getBoundsData(child).bounds;
+                if (bounds !== undefined && Dimension.isValid(bounds)) {
+                    maxWidth += bounds.width;
+                    if (isFirst) {
+                        isFirst = false;
+                    } else {
+                        maxWidth += containerOptions.hGap;
+                    }
+                    maxHeight = Math.max(maxHeight, bounds.height);
+                }
+            }
+        });
+        const result = {
+            width: maxWidth,
+            height: maxHeight
+        };
+        return result;
+    }
+
+    protected override layoutChildren(
+        container: GParentElement & LayoutContainer,
+        layouter: StatefulLayouter,
+        containerOptions: HBoxLayoutOptionsExt,
+        maxWidth: number,
+        maxHeight: number,
+        grabWidth?: number,
+        grabbingChildren?: number
+    ): Point {
+        let currentOffset: Point = {
+            x: containerOptions.paddingLeft + 0.5 * (maxWidth - maxWidth / containerOptions.paddingFactor),
+            y: containerOptions.paddingTop + 0.5 * (maxHeight - maxHeight / containerOptions.paddingFactor)
+        };
+
+        container.children.forEach(child => {
+            if (isLayoutableChild(child)) {
+                const boundsData = layouter.getBoundsData(child);
+                const bounds = boundsData.bounds;
+                const childOptions = this.getChildLayoutOptions(child, containerOptions);
+                if (bounds !== undefined && Dimension.isValid(bounds)) {
+                    currentOffset = this.layoutChild(
+                        child,
+                        boundsData,
+                        bounds,
+                        childOptions,
+                        containerOptions,
+                        currentOffset,
+                        maxWidth,
+                        maxHeight,
+                        grabWidth,
+                        grabbingChildren
+                    );
+                }
+            }
+        });
+        return currentOffset;
+    }
+
+    protected override layoutChild(
+        child: GChildElement,
+        boundsData: BoundsData,
+        bounds: Bounds,
+        childOptions: HBoxLayoutOptionsExt,
+        containerOptions: HBoxLayoutOptionsExt,
+        currentOffset: Point,
+        maxWidth: number,
+        maxHeight: number,
+        grabWidth?: number,
+        grabbingChildren?: number
+    ): Point {
+        const vAlign = childOptions.vGrab ? 'top' : childOptions.vAlign;
+        const dy = this.getDy(vAlign, bounds, maxHeight);
+        let offset = super.layoutChild(child, boundsData, bounds, childOptions, containerOptions, currentOffset, maxWidth, maxHeight);
+        boundsData.bounds = {
+            ...boundsData.bounds!,
+            x: currentOffset.x,
+            y: currentOffset.y + dy
+        };
+        if (childOptions.vGrab) {
+            boundsData.bounds = {
+                x: boundsData.bounds!.x,
+                y: boundsData.bounds!.y,
+                width: boundsData.bounds!.width,
+                height: maxHeight
+            };
+            boundsData.boundsChanged = true;
+        }
+        if (childOptions.hGrab && grabWidth && grabbingChildren) {
+            const width = boundsData.bounds!.width + grabWidth / grabbingChildren;
+            boundsData.bounds = {
+                x: boundsData.bounds!.x,
+                y: boundsData.bounds!.y,
+                width: width,
+                height: boundsData.bounds!.height
+            };
+            boundsData.boundsChanged = true;
+            offset = { x: currentOffset.x + width, y: currentOffset.y };
+        }
+        return offset;
+    }
+
+    protected override getFixedContainerBounds(
+        container: GModelElement,
+        layoutOptions: HBoxLayoutOptionsExt,
+        layouter: StatefulLayouter
+    ): Bounds {
+        const currentContainer = container;
+        // eslint-disable-next-line no-constant-condition
+        if (isBoundsAware(currentContainer)) {
+            const bounds = currentContainer.bounds;
+            const elementOptions = this.getElementLayoutOptions(currentContainer);
+            const width = elementOptions?.prefWidth ?? 0;
+            const height = elementOptions?.prefHeight ?? 0;
+            return { ...bounds, width, height };
+        }
+        return Bounds.EMPTY;
+    }
+
+    protected override getChildLayoutOptions(child: GChildElement, containerOptions: HBoxLayoutOptionsExt): HBoxLayoutOptionsExt {
+        return super.getChildLayoutOptions(child, this.filterContainerOptions(containerOptions)) as HBoxLayoutOptionsExt;
+    }
+
+    protected override getLayoutOptions(element: GModelElement): HBoxLayoutOptionsExt {
+        return super.getLayoutOptions(element) as HBoxLayoutOptionsExt;
+    }
+
+    protected getElementLayoutOptions(element: GModelElement): HBoxLayoutOptionsExt | undefined {
+        return (element as any).layoutOptions;
+    }
+
+    protected override getFinalContainerBounds(
+        container: GParentElement & LayoutContainer,
+        lastOffset: Point,
+        options: HBoxLayoutOptionsExt,
+        maxWidth: number,
+        maxHeight: number
+    ): Bounds {
+        const elementOptions = this.getElementLayoutOptions(container);
+        const width = elementOptions?.prefWidth ?? options.minWidth;
+        const height = elementOptions?.prefHeight ?? options.minHeight;
+
+        const result = {
+            x: container.bounds.x,
+            y: container.bounds.y,
+            width: Math.max(width, maxWidth + options.paddingLeft + options.paddingRight),
+            height: Math.max(height, maxHeight + options.paddingTop + options.paddingBottom)
+        };
+
+        return result;
+    }
+
+    protected override getDefaultLayoutOptions(): HBoxLayoutOptionsExt {
+        return {
+            resizeContainer: true,
+            paddingTop: 5,
+            paddingBottom: 5,
+            paddingLeft: 5,
+            paddingRight: 5,
+            paddingFactor: 1,
+            hGap: 1,
+            vAlign: 'center',
+            minWidth: 0,
+            minHeight: 0,
+            hGrab: false,
+            vGrab: false,
+            // eslint-disable-next-line no-null/no-null
+            prefHeight: null,
+            // eslint-disable-next-line no-null/no-null
+            prefWidth: null
+        };
+    }
+
+    protected filterContainerOptions(containerOptions: HBoxLayoutOptionsExt): HBoxLayoutOptionsExt {
+        // Reset object-specific layout options to default before merging,
+        // to make sure they won't be inherited (grab, prefSize)
+        // eslint-disable-next-line no-null/no-null
+        const localOptions = { vGrab: false, hGrab: false, prefHeight: null, prefWidth: null };
+        return { ...containerOptions, ...localOptions };
+    }
+}

package/src/features/bounds/layouter-test-util.spec.ts

@@ -0,0 +1,127 @@
+/********************************************************************************
+ * Copyright (c) 2022-2023 STMicroelectronics and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { Container } from 'inversify';
+import 'mocha';
+import {
+    BoundsData,
+    ConsoleLogger,
+    Dimension,
+    LayoutRegistry,
+    Point,
+    GCompartment,
+    GLabel,
+    GModelElement,
+    GNode,
+    GParentElement,
+    TYPES,
+    createFeatureSet,
+    layoutableChildFeature
+} from '@eclipse-glsp/sprotty';
+import { initializeDiagramContainer } from '../../default-modules';
+import { StatefulLayouterExt } from './layouter';
+import { GGraph } from '../../model';
+
+export function createGraph(): GGraph {
+    return new GGraph();
+}
+
+export function createNode(
+    type: string,
+    nodeLayout?: string,
+    size?: Dimension,
+    position?: Point,
+    layoutOptions?: { [key: string]: string | number | boolean }
+): GNode {
+    const node = new GNode();
+    node.features = createFeatureSet(GNode.DEFAULT_FEATURES, { enable: [layoutableChildFeature] });
+    node.position = position || {
+        x: 0,
+        y: 0
+    };
+    if (size) {
+        node.size = size;
+    }
+    node.type = type;
+    if (nodeLayout) {
+        node.layout = nodeLayout;
+    }
+    node.layoutOptions = layoutOptions;
+    return node;
+}
+
+export function createCompartment(
+    type: string,
+    compLayout: string,
+    layoutOptions?: { [key: string]: string | number | boolean }
+): GCompartment {
+    const comp = new GCompartment();
+    comp.features = createFeatureSet(GCompartment.DEFAULT_FEATURES);
+    comp.type = type;
+    comp.layout = compLayout;
+    comp.layoutOptions = layoutOptions;
+    return comp;
+}
+
+export function createLabel(
+    labelText: string,
+    layoutOptions?: { [key: string]: string | number | boolean },
+    position?: Point,
+    size?: Dimension
+): GLabel {
+    const label = new GLabel();
+    label.features = createFeatureSet(GLabel.DEFAULT_FEATURES);
+    if (position) {
+        label.position = position;
+    }
+    if (size) {
+        label.size = size;
+    }
+    label.layoutOptions = layoutOptions;
+    label.text = labelText;
+    label.type = 'label';
+    return label;
+}
+
+export function addToMap(map: Map<GModelElement, BoundsData>, element: GModelElement): void {
+    map.set(element, {
+        bounds: (element as any).bounds,
+        boundsChanged: true,
+        alignmentChanged: true
+    });
+    if (element instanceof GParentElement) {
+        element.children.forEach(c => addToMap(map, c));
+    }
+}
+
+export function layout(
+    layoutRegistry: LayoutRegistry,
+    log: ConsoleLogger,
+    map: Map<GModelElement, BoundsData>,
+    model: GNode | GGraph
+): void {
+    map.clear();
+    addToMap(map, model);
+    const layouter = new StatefulLayouterExt(map, layoutRegistry, log);
+    layouter.layout();
+}
+
+export function setupLayoutRegistry(): LayoutRegistry {
+    // Generic Test setup
+    // create client container that registers all default modules including the layoutModule
+    const layoutContainer = initializeDiagramContainer(new Container());
+    return layoutContainer.get<LayoutRegistry>(TYPES.LayoutRegistry);
+}

package/src/features/bounds/layouter.ts

@@ -0,0 +1,137 @@
+/********************************************************************************
+ * Copyright (c) 2022-2023 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+import { injectable } from 'inversify';
+import {
+    Bounds,
+    BoundsData,
+    ILogger,
+    LayoutContainer,
+    LayoutRegistry,
+    Layouter,
+    GModelElement,
+    GParentElement,
+    StatefulLayouter,
+    isLayoutContainer
+} from '@eclipse-glsp/sprotty';
+
+@injectable()
+export class LayouterExt extends Layouter {
+    override layout(element2boundsData: Map<GModelElement, BoundsData>): void {
+        new StatefulLayouterExt(element2boundsData, this.layoutRegistry, this.logger).layout();
+    }
+}
+
+// 2-pass layout:
+// Step 1: Find "rendered size" of each element (may take resizeContainer into account)
+// Child-to-parent layout
+// Step 2: Extend parents as necessary, then use the adjusted parent size to properly
+// align children (center/end alignments, hGrab/vGrab)
+// Parent-to-children layout
+
+export class StatefulLayouterExt extends StatefulLayouter {
+    protected toBeLayouted2: (GParentElement & LayoutContainer)[];
+
+    /**
+     *
+     * @param elementToBoundsData The map of element to bounds data. Bounds Data are computed from the hidden
+     * SVG rendering pass.
+     * @param layoutRegistry2 The registry of available layouts.
+     * @param log The log.
+     */
+    constructor(
+        protected readonly elementToBoundsData: Map<GModelElement, BoundsData>,
+        protected readonly layoutRegistry2: LayoutRegistry,
+        log: ILogger
+    ) {
+        super(elementToBoundsData, layoutRegistry2, log);
+        this.toBeLayouted2 = [];
+        elementToBoundsData.forEach((data, element) => {
+            if (isLayoutContainer(element)) {
+                this.toBeLayouted2.push(element);
+            }
+        });
+        for (const element of this.toBeLayouted2) {
+            // Clear previous layout information for dynamic-layout objects
+            elementToBoundsData.delete(element);
+        }
+    }
+
+    override getBoundsData(element: GModelElement): BoundsData {
+        let boundsData = this.elementToBoundsData.get(element);
+        let bounds = (element as any).bounds;
+        if (isLayoutContainer(element) && this.toBeLayouted2.indexOf(element) >= 0) {
+            bounds = this.doLayout(element);
+        } else if (isLayoutContainer(element)) {
+            bounds = {
+                x: 0,
+                y: 0,
+                width: -1,
+                height: -1
+            };
+        }
+        if (!boundsData) {
+            boundsData = {
+                bounds: bounds,
+                boundsChanged: false,
+                alignmentChanged: false
+            };
+            this.elementToBoundsData.set(element, boundsData);
+        }
+        return boundsData;
+    }
+
+    override layout(): void {
+        // First pass: apply layout with cleared container data. Will get
+        // preferred size for all elements (Children first, then parents)
+        while (this.toBeLayouted2.length > 0) {
+            const element = this.toBeLayouted2[0];
+            this.doLayout(element);
+        }
+
+        this.toBeLayouted2 = [];
+        this.elementToBoundsData.forEach((data, element) => {
+            if (isLayoutContainer(element)) {
+                this.toBeLayouted2.push(element);
+            }
+        });
+
+        // Second pass: apply layout with initial size data for all
+        // nodes. Update the position/size of all elements, taking
+        // vGrab/hGrab into account (parent -> children).
+        while (this.toBeLayouted2.length > 0) {
+            const element = this.toBeLayouted2[0];
+            this.doLayout(element);
+        }
+    }
+
+    protected override doLayout(element: GParentElement & LayoutContainer): Bounds {
+        const index = this.toBeLayouted2.indexOf(element);
+        if (index >= 0) {
+            this.toBeLayouted2.splice(index, 1);
+        }
+        const layout = this.layoutRegistry2.get(element.layout);
+        if (layout) {
+            layout.layout(element, this);
+        }
+        const boundsData = this.elementToBoundsData.get(element);
+        if (boundsData !== undefined && boundsData.bounds !== undefined) {
+            return boundsData.bounds;
+        } else {
+            this.log.error(element, 'Layout failed');
+            return Bounds.EMPTY;
+        }
+    }
+}