@kieler/klighd-interactive - npm Package Compare versions

Comparing version 0.5.0-next.265acc6 to 0.5.0-next.2b5de15

lib/actions.js

@@ -18,2 +18,4 @@ "use strict";
  */
+// We follow Sprotty's way of redeclaring the interface and its create function, so disable this lint check for this file.
+/* eslint-disable no-redeclare */
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -30,3 +32,3 @@ exports.DeleteConstraintAction = exports.RefreshDiagramAction = void 0;
     RefreshDiagramAction.create = create;
-})(RefreshDiagramAction = exports.RefreshDiagramAction || (exports.RefreshDiagramAction = {}));
+})(RefreshDiagramAction || (exports.RefreshDiagramAction = RefreshDiagramAction = {}));
 var DeleteConstraintAction;
@@ -38,7 +40,7 @@ (function (DeleteConstraintAction) {
             kind: DeleteConstraintAction.KIND,
-            constraint: constraint,
+            constraint,
         };
     }
     DeleteConstraintAction.create = create;
-})(DeleteConstraintAction = exports.DeleteConstraintAction || (exports.DeleteConstraintAction = {}));
+})(DeleteConstraintAction || (exports.DeleteConstraintAction = DeleteConstraintAction = {}));
 //# sourceMappingURL=actions.js.map

lib/constraint-classes.d.ts

@@ -1,2 +0,2 @@
-import { RectangularNode, SEdge, SParentElement } from 'sprotty';
+import { RectangularNode, SEdgeImpl, SParentElementImpl } from 'sprotty';
 import { Point } from 'sprotty-protocol';
@@ -9,3 +9,3 @@ /**
  */
-export interface KGraphElement extends SParentElement {
+export interface KGraphElement extends SParentElementImpl {
     /**
@@ -61,3 +61,3 @@ * May contain a trace that points back to the server instance where this element was created.
  */
-export declare class KEdge extends SEdge implements KGraphElement {
+export declare class KEdge extends SEdgeImpl implements KGraphElement {
     trace?: string;
@@ -64,0 +64,0 @@ data: KGraphData[];

lib/constraint-classes.js

@@ -7,3 +7,3 @@ "use strict";
  *
- * Copyright 2019-2021 by
+ * Copyright 2019-2023 by
  * + Kiel University
@@ -19,36 +19,20 @@ *   + Department of Computer Science
  */
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KEdge = exports.Direction = exports.KNode = void 0;
-var sprotty_1 = require("sprotty");
+const sprotty_1 = require("sprotty");
 /**
  * Represents its java counterpart in KLighD.
  */
-var KNode = /** @class */ (function (_super) {
-    __extends(KNode, _super);
-    function KNode() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.areChildAreaChildrenRendered = false;
-        _this.areNonChildAreaChildrenRendered = false;
-        return _this;
+class KNode extends sprotty_1.RectangularNode {
+    constructor() {
+        super(...arguments);
+        this.areChildAreaChildrenRendered = false;
+        this.areNonChildAreaChildrenRendered = false;
     }
-    KNode.prototype.hasFeature = function (feature) {
-        return feature === sprotty_1.selectFeature || (feature === sprotty_1.moveFeature && this.parent.properties['org.eclipse.elk.interactiveLayout']);
-    };
-    return KNode;
-}(sprotty_1.RectangularNode));
+    hasFeature(feature) {
+        return (feature === sprotty_1.selectFeature ||
+            (feature === sprotty_1.moveFeature &&
+                this.parent.properties['org.eclipse.elk.interactiveLayout']));
+    }
+}
 exports.KNode = KNode;
@@ -62,20 +46,17 @@ var Direction;
     Direction[Direction["UP"] = 4] = "UP";
-})(Direction = exports.Direction || (exports.Direction = {}));
+})(Direction || (exports.Direction = Direction = {}));
 /**
  * Represents its java counterpart in KLighD.
  */
-var KEdge = /** @class */ (function (_super) {
-    __extends(KEdge, _super);
-    function KEdge() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.areChildAreaChildrenRendered = false;
-        _this.areNonChildAreaChildrenRendered = false;
-        return _this;
+class KEdge extends sprotty_1.SEdgeImpl {
+    constructor() {
+        super(...arguments);
+        this.areChildAreaChildrenRendered = false;
+        this.areNonChildAreaChildrenRendered = false;
     }
-    KEdge.prototype.hasFeature = function (feature) {
+    hasFeature(feature) {
         return feature === sprotty_1.selectFeature;
-    };
-    return KEdge;
-}(sprotty_1.SEdge));
+    }
+}
 exports.KEdge = KEdge;
 //# sourceMappingURL=constraint-classes.js.map

lib/helper-methods.d.ts

@@ -1,2 +0,2 @@
-import { KNode } from "./constraint-classes";
+import { KNode } from './constraint-classes';
 /**
@@ -14,5 +14,5 @@ * Filters the KNodes out of graphElements.
 /**
-* Determines whether one of the children is selected.
-* @param root Node which children should be checked.
-*/
+ * Determines whether one of the children is selected.
+ * @param root Node which children should be checked.
+ */
 export declare function isChildSelected(root: KNode): boolean;

lib/helper-methods.js

@@ -7,3 +7,3 @@ "use strict";
  *
- * Copyright 2020 by
+ * Copyright 2020-2023 by
  * + Kiel University
@@ -21,3 +21,3 @@ *   + Department of Computer Science
 exports.isChildSelected = exports.getSelectedNode = exports.filterKNodes = void 0;
-var sprotty_1 = require("sprotty");
+const sprotty_1 = require("sprotty");
 /**
@@ -28,6 +28,6 @@ * Filters the KNodes out of graphElements.
 function filterKNodes(graphElements) {
-    var nodes = [];
-    for (var _i = 0, graphElements_1 = graphElements; _i < graphElements_1.length; _i++) {
-        var elem = graphElements_1[_i];
-        if (elem instanceof sprotty_1.SNode) {
+    // eslint-disable-line
+    const nodes = [];
+    for (const elem of graphElements) {
+        if (elem instanceof sprotty_1.SNodeImpl) {
             nodes[nodes.length] = elem;
@@ -45,4 +45,3 @@ }
 function getSelectedNode(nodes) {
-    for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {
-        var node = nodes_1[_i];
+    for (const node of nodes) {
         if (node.selected) {
@@ -56,11 +55,10 @@ return node;
 /**
-* Determines whether one of the children is selected.
-* @param root Node which children should be checked.
-*/
+ * Determines whether one of the children is selected.
+ * @param root Node which children should be checked.
+ */
 function isChildSelected(root) {
-    var nodes = root.children;
+    const nodes = root.children;
     if (nodes !== undefined) {
-        for (var _i = 0, nodes_2 = nodes; _i < nodes_2.length; _i++) {
-            var node = nodes_2[_i];
-            if (node instanceof sprotty_1.SNode && node.selected) {
+        for (const node of nodes) {
+            if (node instanceof sprotty_1.SNodeImpl && node.selected) {
                 return true;
@@ -67,0 +65,0 @@ }

lib/interactive-module.js

@@ -20,13 +20,13 @@ "use strict";
 exports.interactiveModule = void 0;
-var inversify_1 = require("inversify");
-var sprotty_1 = require("sprotty");
-var klighd_interactive_mouselistener_1 = require("./klighd-interactive-mouselistener");
+const inversify_1 = require("inversify");
+const sprotty_1 = require("sprotty");
+const klighd_interactive_mouselistener_1 = require("./klighd-interactive-mouselistener");
 /**
  * Bindings for the interactive mouse listener.
  */
-exports.interactiveModule = new inversify_1.ContainerModule(function (bind, _unbind, isBound) {
+exports.interactiveModule = new inversify_1.ContainerModule((bind, _unbind, isBound) => {
     bind(klighd_interactive_mouselistener_1.KlighdInteractiveMouseListener).toSelf().inSingletonScope();
     bind(sprotty_1.TYPES.MouseListener).toService(klighd_interactive_mouselistener_1.KlighdInteractiveMouseListener);
     bind(sprotty_1.MoveMouseListener).toService(klighd_interactive_mouselistener_1.KlighdInteractiveMouseListener);
-    (0, sprotty_1.configureCommand)({ bind: bind, isBound: isBound }, sprotty_1.MoveCommand);
+    (0, sprotty_1.configureCommand)({ bind, isBound }, sprotty_1.MoveCommand);
     bind(sprotty_1.TYPES.IVNodePostprocessor).to(sprotty_1.LocationPostprocessor);
@@ -33,0 +33,0 @@ bind(sprotty_1.TYPES.HiddenVNodePostprocessor).to(sprotty_1.LocationPostprocessor);

lib/interactive-view-objects.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderArrow = exports.renderLock = exports.renderCircle = exports.createVerticalLine = exports.createRect = void 0;
-var sprotty_1 = require("sprotty"); // eslint-disable-line @typescript-eslint/no-unused-vars
-var constraint_classes_1 = require("./constraint-classes");
-var svg_path_1 = require("./svg-path");
-var iconScale = 0.01;
+const sprotty_1 = require("sprotty"); // eslint-disable-line @typescript-eslint/no-unused-vars
+const constraint_classes_1 = require("./constraint-classes");
+const svg_path_1 = require("./svg-path");
+const iconScale = 0.01;
 /**
@@ -19,8 +19,19 @@ * Creates a rectangle.
 function createRect(begin, end, top, bottom, forbidden, selected, direction) {
-    var forbiddenColor = 'indianred';
-    var backgroundColor = selected ? 'grey' : 'lightgrey';
-    // @ts-ignore
-    return (0, sprotty_1.svg)("g", null,
-        " ",
-        (0, sprotty_1.svg)("rect", { x: (direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.UNDEFINED) ? begin : direction === constraint_classes_1.Direction.LEFT ? end : top, y: (direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.UNDEFINED || direction === constraint_classes_1.Direction.LEFT) ? top : direction === constraint_classes_1.Direction.UP ? end : begin, width: (direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.UNDEFINED || direction === constraint_classes_1.Direction.LEFT) ? Math.abs(begin - end) : bottom - top, height: (direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.UNDEFINED || direction === constraint_classes_1.Direction.LEFT) ? bottom - top : Math.abs(begin - end), fill: forbidden ? forbiddenColor : backgroundColor, stroke: forbidden ? forbiddenColor : 'grey', style: { 'stroke-dasharray': "4" } }));
+    const forbiddenColor = 'indianred';
+    const backgroundColor = selected ? 'grey' : 'lightgrey';
+    return ((0, sprotty_1.svg)("g", null,
+        ' ',
+        (0, sprotty_1.svg)("rect", { x: direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.UNDEFINED
+                ? begin
+                : direction === constraint_classes_1.Direction.LEFT
+                    ? end
+                    : top, y: direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.UNDEFINED || direction === constraint_classes_1.Direction.LEFT
+                ? top
+                : direction === constraint_classes_1.Direction.UP
+                    ? end
+                    : begin, width: direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.UNDEFINED || direction === constraint_classes_1.Direction.LEFT
+                ? Math.abs(begin - end)
+                : bottom - top, height: direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.UNDEFINED || direction === constraint_classes_1.Direction.LEFT
+                ? bottom - top
+                : Math.abs(begin - end), fill: forbidden ? forbiddenColor : backgroundColor, stroke: forbidden ? forbiddenColor : 'grey', style: { 'stroke-dasharray': '4' } })));
 }
@@ -36,6 +47,13 @@ exports.createRect = createRect;
 function createVerticalLine(mid, top, bot, direction) {
-    // @ts-ignore
-    return (0, sprotty_1.svg)("g", null,
-        " ",
-        (0, sprotty_1.svg)("line", { x1: (direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.LEFT || direction === constraint_classes_1.Direction.UNDEFINED) ? mid : top, y1: (direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.LEFT || direction === constraint_classes_1.Direction.UNDEFINED) ? top : mid, x2: (direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.LEFT || direction === constraint_classes_1.Direction.UNDEFINED) ? mid : bot, y2: (direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.LEFT || direction === constraint_classes_1.Direction.UNDEFINED) ? bot : mid, fill: 'none', stroke: 'grey', style: { 'stroke-dasharray': '4' } }));
+    return ((0, sprotty_1.svg)("g", null,
+        ' ',
+        (0, sprotty_1.svg)("line", { x1: direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.LEFT || direction === constraint_classes_1.Direction.UNDEFINED
+                ? mid
+                : top, y1: direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.LEFT || direction === constraint_classes_1.Direction.UNDEFINED
+                ? top
+                : mid, x2: direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.LEFT || direction === constraint_classes_1.Direction.UNDEFINED
+                ? mid
+                : bot, y2: direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.LEFT || direction === constraint_classes_1.Direction.UNDEFINED
+                ? bot
+                : mid, fill: "none", stroke: "grey", style: { 'stroke-dasharray': '4' } })));
 }
@@ -51,8 +69,7 @@ exports.createVerticalLine = createVerticalLine;
 function renderCircle(fill, x, y, forbidden) {
-    var forbiddenColor = 'indianred';
-    var color = forbidden ? forbiddenColor : 'grey';
-    // @ts-ignore
-    return (0, sprotty_1.svg)("g", null,
-        " ",
-        (0, sprotty_1.svg)("circle", { cx: x, cy: y, r: "2", stroke: color, fill: fill ? color : "none", style: { 'stroke-width': '0.5' } }));
+    const forbiddenColor = 'indianred';
+    const color = forbidden ? forbiddenColor : 'grey';
+    return ((0, sprotty_1.svg)("g", null,
+        ' ',
+        (0, sprotty_1.svg)("circle", { cx: x, cy: y, r: "2", stroke: color, fill: fill ? color : 'none', style: { 'stroke-width': '0.5' } })));
 }
@@ -66,8 +83,6 @@ exports.renderCircle = renderCircle;
 function renderLock(xTranslate, yTranslate) {
-    var generalYOffset = 5;
-    var s = "translate(" + xTranslate + ","
-        + (yTranslate - generalYOffset) + ") scale(" + iconScale + ", " + iconScale + ")";
-    // @ts-ignore
-    return (0, sprotty_1.svg)("g", { transform: s, fill: "grey", stroke: "none" },
-        (0, sprotty_1.svg)("path", { d: svg_path_1.lockPath }));
+    const generalYOffset = 5;
+    const s = `translate(${xTranslate},${yTranslate - generalYOffset}) scale(${iconScale}, ${iconScale})`;
+    return ((0, sprotty_1.svg)("g", { transform: s, fill: "grey", stroke: "none" },
+        (0, sprotty_1.svg)("path", { d: svg_path_1.lockPath })));
 }
@@ -82,17 +97,12 @@ exports.renderLock = renderLock;
 function renderArrow(xTranslate, yTranslate, vertical) {
-    var s = "translate(" + xTranslate + ","
-        + yTranslate + ")";
-    s += " scale(" + iconScale + ", " + iconScale + ")";
+    let s = `translate(${xTranslate},${yTranslate})`;
+    s += ` scale(${iconScale}, ${iconScale})`;
     if (vertical) {
-        // @ts-ignore
-        return (0, sprotty_1.svg)("g", { transform: s, fill: "grey", stroke: "none" },
-            (0, sprotty_1.svg)("path", { d: svg_path_1.arrowVertical }));
+        return ((0, sprotty_1.svg)("g", { transform: s, fill: "grey", stroke: "none" },
+            (0, sprotty_1.svg)("path", { d: svg_path_1.arrowVertical })));
     }
-    else {
-        // @ts-ignore
-        return (0, sprotty_1.svg)("g", { transform: s, fill: "grey", stroke: "none" },
-            (0, sprotty_1.svg)("path", { d: svg_path_1.arrowHorizontal }));
-    }
+    return ((0, sprotty_1.svg)("g", { transform: s, fill: "grey", stroke: "none" },
+        (0, sprotty_1.svg)("path", { d: svg_path_1.arrowHorizontal })));
 }
 exports.renderArrow = renderArrow;
 //# sourceMappingURL=interactive-view-objects.js.map

lib/interactive-view.d.ts

 /** @jsx svg */
-import { VNode } from "snabbdom";
+import { VNode } from 'snabbdom';
 import { KNode } from './constraint-classes';
@@ -4,0 +4,0 @@ /**

lib/interactive-view.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderConstraints = exports.renderInteractiveLayout = void 0;
-var sprotty_1 = require("sprotty"); // eslint-disable-line @typescript-eslint/no-unused-vars
-var helper_methods_1 = require("./helper-methods");
-var layered_interactive_view_1 = require("./layered/layered-interactive-view");
-var rect_packing_interactive_view_1 = require("./rect-packing/rect-packing-interactive-view");
+const sprotty_1 = require("sprotty"); // eslint-disable-line @typescript-eslint/no-unused-vars
+const helper_methods_1 = require("./helper-methods");
+const layered_interactive_view_1 = require("./layered/layered-interactive-view");
+const rect_packing_interactive_view_1 = require("./rect-packing/rect-packing-interactive-view");
 /**
@@ -14,5 +14,6 @@ * Visualize the layers and available positions in the graph
     // Filter KNodes
-    var nodes = (0, helper_methods_1.filterKNodes)(root.children);
-    var result = undefined;
-    if (root.properties['org.eclipse.elk.algorithm'] === undefined || root.properties['org.eclipse.elk.algorithm'].endsWith('layered')) {
+    const nodes = (0, helper_methods_1.filterKNodes)(root.children);
+    let result;
+    if (root.properties['org.eclipse.elk.algorithm'] === undefined ||
+        root.properties['org.eclipse.elk.algorithm'].endsWith('layered')) {
         result = (0, layered_interactive_view_1.renderHierarchyLevel)(nodes);
@@ -26,3 +27,2 @@ }
     }
-    // @ts-ignore
     return (0, sprotty_1.svg)("g", null, result);
@@ -36,4 +36,4 @@ }
 function renderConstraints(node) {
-    var result = (0, sprotty_1.svg)("g", null);
-    var algorithm = node.parent.properties['org.eclipse.elk.algorithm'];
+    let result = (0, sprotty_1.svg)("g", null);
+    const algorithm = node.parent.properties['org.eclipse.elk.algorithm'];
     if (algorithm === undefined || algorithm.endsWith('layered')) {
@@ -50,3 +50,2 @@ result = (0, layered_interactive_view_1.renderLayeredConstraint)(node);
     }
-    // @ts-ignore
     return result;
@@ -53,0 +52,0 @@ }

lib/klighd-interactive-mouselistener.d.ts

@@ -1,3 +0,3 @@
-import { MoveMouseListener, SModelElement } from 'sprotty';
-import { Action } from "sprotty-protocol";
+import { MoveMouseListener, SModelElementImpl } from 'sprotty';
+import { Action } from 'sprotty-protocol';
 export declare class KlighdInteractiveMouseListener extends MoveMouseListener {
@@ -21,4 +21,4 @@ /**
      */
-    mouseMove(target: SModelElement, event: MouseEvent): Action[];
-    mouseDown(target: SModelElement, event: MouseEvent): Action[];
+    mouseMove(target: SModelElementImpl, event: MouseEvent): Action[];
+    mouseDown(target: SModelElementImpl, event: MouseEvent): (Action | Promise<Action>)[];
     /**
@@ -30,3 +30,3 @@ * Override size mouseEnter to not call mouseUp.
     mouseEnter(): Action[];
-    mouseUp(target: SModelElement, event: MouseEvent): Action[];
+    mouseUp(target: SModelElementImpl, event: MouseEvent): (Action | Promise<Action>)[];
 }

lib/klighd-interactive-mouselistener.js

@@ -7,3 +7,3 @@ "use strict";
  *
- * Copyright 2019-2021 by
+ * Copyright 2019-2023 by
  * + Kiel University
@@ -19,17 +19,2 @@ *   + Department of Computer Science
  */
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -43,23 +28,23 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 exports.KlighdInteractiveMouseListener = void 0;
-var inversify_1 = require("inversify");
-var sprotty_1 = require("sprotty");
-var actions_1 = require("./actions");
-var helper_methods_1 = require("./helper-methods");
-var actions_2 = require("./layered/actions");
-var constraint_utils_1 = require("./layered/constraint-utils");
-var actions_3 = require("./rect-packing/actions");
-var constraint_util_1 = require("./rect-packing/constraint-util");
-var KlighdInteractiveMouseListener = /** @class */ (function (_super) {
-    __extends(KlighdInteractiveMouseListener, _super);
-    function KlighdInteractiveMouseListener() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+const inversify_1 = require("inversify");
+const sprotty_1 = require("sprotty");
+const sprotty_protocol_1 = require("sprotty-protocol");
+const actions_1 = require("./actions");
+const helper_methods_1 = require("./helper-methods");
+const actions_2 = require("./layered/actions");
+const constraint_utils_1 = require("./layered/constraint-utils");
+const actions_3 = require("./rect-packing/actions");
+const constraint_util_1 = require("./rect-packing/constraint-util");
+/* global MouseEvent */
+let KlighdInteractiveMouseListener = class KlighdInteractiveMouseListener extends sprotty_1.MoveMouseListener {
+    constructor() {
+        super(...arguments);
         /**
          * Map to holds algorithm specific data generated on mouse down.
          */
-        _this.data = new Map;
+        this.data = new Map();
         /**
          * The nodes.
          */
-        _this.nodes = [];
-        return _this;
+        this.nodes = [];
     }
@@ -71,9 +56,9 @@ /**
      */
-    KlighdInteractiveMouseListener.prototype.mouseMove = function (target, event) {
+    mouseMove(target, event) {
         if (!event.altKey && this.target) {
-            if (target instanceof sprotty_1.SLabel && target.parent instanceof sprotty_1.SNode) {
+            if (target instanceof sprotty_1.SLabelImpl && target.parent instanceof sprotty_1.SNodeImpl) {
                 // nodes should be movable when the user clicks on the label
                 target = target.parent;
             }
-            var result = [];
+            const result = [];
             if (this.startDragPosition) {
@@ -84,3 +69,3 @@ if (this.elementId2startPos.size === 0) {
                 this.hasDragged = true;
-                var moveAction = this.getElementMoves(this.target, event, false);
+                const moveAction = this.getElementMoves(this.target, event, false);
                 if (moveAction)
@@ -90,3 +75,3 @@ result.push(moveAction);
             // workaround - when a node is moved and after that an edge, hasDragged is set to true although edges are not movable
-            if (target instanceof sprotty_1.SEdge) {
+            if (target instanceof sprotty_1.SEdgeImpl) {
                 this.hasDragged = false;
@@ -97,10 +82,10 @@ }
         return [];
-    };
-    KlighdInteractiveMouseListener.prototype.mouseDown = function (target, event) {
-        var targetNode = target;
-        if (target instanceof sprotty_1.SLabel && target.parent instanceof sprotty_1.SNode) {
+    }
+    mouseDown(target, event) {
+        let targetNode = target;
+        if (target instanceof sprotty_1.SLabelImpl && target.parent instanceof sprotty_1.SNodeImpl) {
             // nodes should be movable when the user clicks on the label
             targetNode = target.parent;
         }
-        if (targetNode && targetNode instanceof sprotty_1.SNode) {
+        if (targetNode && targetNode instanceof sprotty_1.SNodeImpl) {
             if (targetNode.parent.properties['org.eclipse.elk.interactiveLayout']) {
@@ -110,3 +95,3 @@ this.target = targetNode;
                 this.nodes = (0, helper_methods_1.filterKNodes)(this.target.parent.children);
-                var algorithm = targetNode.parent.properties['org.eclipse.elk.algorithm'];
+                const algorithm = targetNode.parent.properties['org.eclipse.elk.algorithm'];
                 // Set algorithm specific data
@@ -126,17 +111,21 @@ if (algorithm === undefined || algorithm.endsWith('layered')) {
                     if (algorithm === undefined || algorithm.endsWith('layered')) {
-                        return [actions_2.DeleteStaticConstraintAction.create({
-                                id: this.target.id
-                            })];
+                        return [
+                            actions_2.DeleteStaticConstraintAction.create({
+                                id: this.target.id,
+                            }),
+                        ];
                     }
-                    else if (algorithm.endsWith('rectpacking')) {
-                        return [actions_3.RectPackDeletePositionConstraintAction.create({
-                                id: this.target.id
-                            })];
+                    if (algorithm.endsWith('rectpacking')) {
+                        return [
+                            actions_3.RectPackDeletePositionConstraintAction.create({
+                                id: this.target.id,
+                            }),
+                        ];
                     }
                 }
-                return _super.prototype.mouseDown.call(this, this.target, event);
+                return super.mouseDown(this.target, event);
             }
         }
-        return _super.prototype.mouseDown.call(this, target, event);
-    };
+        return super.mouseDown(target, event);
+    }
     /**
@@ -147,17 +136,17 @@ * Override size mouseEnter to not call mouseUp.
      */
-    KlighdInteractiveMouseListener.prototype.mouseEnter = function () {
+    mouseEnter() {
         return [];
-    };
-    KlighdInteractiveMouseListener.prototype.mouseUp = function (target, event) {
+    }
+    mouseUp(target, event) {
         if (this.hasDragged && this.target) {
             // if a node is moved set properties
             this.target.shadow = false;
-            var result = _super.prototype.mouseUp.call(this, this.target, event);
-            var algorithm = this.target.parent.properties['org.eclipse.elk.algorithm'];
+            let result = super.mouseUp(this.target, event);
+            const algorithm = this.target.parent.properties['org.eclipse.elk.algorithm'];
             if (algorithm === undefined || algorithm.endsWith('layered')) {
-                result = [(0, constraint_utils_1.setProperty)(this.nodes, this.data.get('layered'), this.target)].concat(_super.prototype.mouseUp.call(this, this.target, event));
+                result = [(0, constraint_utils_1.setProperty)(this.nodes, this.data.get('layered'), this.target)].concat(super.mouseUp(this.target, event));
             }
             else if (algorithm.endsWith('rectpacking')) {
-                var parent_1 = this.nodes[0] ? this.nodes[0].parent : undefined;
-                result = [(0, constraint_util_1.setGenerateRectPackAction)(this.nodes, this.target, parent_1, event)].concat(_super.prototype.mouseUp.call(this, this.target, event));
+                const parent = this.nodes[0] ? this.nodes[0].parent : undefined;
+                result = [(0, constraint_util_1.setGenerateRectPackAction)(this.nodes, this.target, parent, event)].concat(super.mouseUp(this.target, event));
             }
@@ -169,23 +158,20 @@ else {
             // Refresh the diagram according to the moved elements.
-            if (result.some(function (action) { return action.kind === actions_1.RefreshDiagramAction.KIND; })) {
+            if (result.some((action) => (0, sprotty_protocol_1.isAction)(action) && action.kind === actions_1.RefreshDiagramAction.KIND)) {
                 return result;
             }
-            else {
-                return result.concat([actions_1.RefreshDiagramAction.create()]);
-            }
+            return result.concat([actions_1.RefreshDiagramAction.create()]);
         }
-        else if (this.target) {
+        if (this.target) {
             this.target.selected = false;
-            var result = _super.prototype.mouseUp.call(this, this.target, event);
+            const result = super.mouseUp(this.target, event);
             this.target = undefined;
             return result;
         }
-        return _super.prototype.mouseUp.call(this, target, event);
-    };
-    KlighdInteractiveMouseListener = __decorate([
-        (0, inversify_1.injectable)()
-    ], KlighdInteractiveMouseListener);
-    return KlighdInteractiveMouseListener;
-}(sprotty_1.MoveMouseListener));
+        return super.mouseUp(target, event);
+    }
+};
 exports.KlighdInteractiveMouseListener = KlighdInteractiveMouseListener;
+exports.KlighdInteractiveMouseListener = KlighdInteractiveMouseListener = __decorate([
+    (0, inversify_1.injectable)()
+], KlighdInteractiveMouseListener);
 //# sourceMappingURL=klighd-interactive-mouselistener.js.map

lib/layered/actions.js

@@ -18,2 +18,4 @@ "use strict";
  */
+// We follow Sprotty's way of redeclaring the interface and its create function, so disable this lint check for this file.
+/* eslint-disable no-redeclare */
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -27,7 +29,7 @@ exports.SetPositionConstraintAction = exports.SetLayerConstraintAction = exports.DeleteLayerConstraintAction = exports.DeletePositionConstraintAction = exports.DeleteStaticConstraintAction = exports.SetStaticConstraintAction = void 0;
             kind: SetStaticConstraintAction.KIND,
-            constraint: constraint,
+            constraint,
         };
     }
     SetStaticConstraintAction.create = create;
-})(SetStaticConstraintAction = exports.SetStaticConstraintAction || (exports.SetStaticConstraintAction = {}));
+})(SetStaticConstraintAction || (exports.SetStaticConstraintAction = SetStaticConstraintAction = {}));
 var DeleteStaticConstraintAction;
@@ -39,7 +41,7 @@ (function (DeleteStaticConstraintAction) {
             kind: DeleteStaticConstraintAction.KIND,
-            constraint: constraint,
+            constraint,
         };
     }
     DeleteStaticConstraintAction.create = create;
-})(DeleteStaticConstraintAction = exports.DeleteStaticConstraintAction || (exports.DeleteStaticConstraintAction = {}));
+})(DeleteStaticConstraintAction || (exports.DeleteStaticConstraintAction = DeleteStaticConstraintAction = {}));
 var DeletePositionConstraintAction;
@@ -51,7 +53,7 @@ (function (DeletePositionConstraintAction) {
             kind: DeletePositionConstraintAction.KIND,
-            constraint: constraint,
+            constraint,
         };
     }
     DeletePositionConstraintAction.create = create;
-})(DeletePositionConstraintAction = exports.DeletePositionConstraintAction || (exports.DeletePositionConstraintAction = {}));
+})(DeletePositionConstraintAction || (exports.DeletePositionConstraintAction = DeletePositionConstraintAction = {}));
 var DeleteLayerConstraintAction;
@@ -63,7 +65,7 @@ (function (DeleteLayerConstraintAction) {
             kind: DeleteLayerConstraintAction.KIND,
-            constraint: constraint,
+            constraint,
         };
     }
     DeleteLayerConstraintAction.create = create;
-})(DeleteLayerConstraintAction = exports.DeleteLayerConstraintAction || (exports.DeleteLayerConstraintAction = {}));
+})(DeleteLayerConstraintAction || (exports.DeleteLayerConstraintAction = DeleteLayerConstraintAction = {}));
 var SetLayerConstraintAction;
@@ -75,7 +77,7 @@ (function (SetLayerConstraintAction) {
             kind: SetLayerConstraintAction.KIND,
-            constraint: constraint,
+            constraint,
         };
     }
     SetLayerConstraintAction.create = create;
-})(SetLayerConstraintAction = exports.SetLayerConstraintAction || (exports.SetLayerConstraintAction = {}));
+})(SetLayerConstraintAction || (exports.SetLayerConstraintAction = SetLayerConstraintAction = {}));
 var SetPositionConstraintAction;
@@ -87,7 +89,7 @@ (function (SetPositionConstraintAction) {
             kind: SetPositionConstraintAction.KIND,
-            constraint: constraint,
+            constraint,
         };
     }
     SetPositionConstraintAction.create = create;
-})(SetPositionConstraintAction = exports.SetPositionConstraintAction || (exports.SetPositionConstraintAction = {}));
+})(SetPositionConstraintAction || (exports.SetPositionConstraintAction = SetPositionConstraintAction = {}));
 //# sourceMappingURL=actions.js.map

lib/layered/constraint-types.d.ts

@@ -1,2 +0,2 @@
-import { Direction } from "../constraint-classes";
+import { Direction } from '../constraint-classes';
 /**
@@ -3,0 +3,0 @@ * A layer visualization data class for the interactive layered approach.

lib/layered/constraint-types.js

@@ -23,4 +23,4 @@ "use strict";
  */
-var Layer = /** @class */ (function () {
-    function Layer(leftX, rightX, mid, direction) {
+class Layer {
+    constructor(leftX, rightX, mid, direction) {
         this.begin = leftX;
@@ -31,4 +31,3 @@ this.end = rightX;
     }
-    return Layer;
-}());
+}
 exports.Layer = Layer;
@@ -38,7 +37,4 @@ /**
  */
-var DeleteConstraint = /** @class */ (function () {
-    function DeleteConstraint() {
-    }
-    return DeleteConstraint;
-}());
+class DeleteConstraint {
+}
 exports.DeleteConstraint = DeleteConstraint;
@@ -48,7 +44,4 @@ /**
  */
-var LayerConstraint = /** @class */ (function () {
-    function LayerConstraint() {
-    }
-    return LayerConstraint;
-}());
+class LayerConstraint {
+}
 exports.LayerConstraint = LayerConstraint;
@@ -58,7 +51,4 @@ /**
  */
-var PositionConstraint = /** @class */ (function () {
-    function PositionConstraint() {
-    }
-    return PositionConstraint;
-}());
+class PositionConstraint {
+}
 exports.PositionConstraint = PositionConstraint;
@@ -68,8 +58,5 @@ /**
  */
-var StaticConstraint = /** @class */ (function () {
-    function StaticConstraint() {
-    }
-    return StaticConstraint;
-}());
+class StaticConstraint {
+}
 exports.StaticConstraint = StaticConstraint;
 //# sourceMappingURL=constraint-types.js.map

lib/layered/constraint-utils.d.ts

@@ -1,2 +0,2 @@
-import { SModelElement } from 'sprotty';
+import { SModelElementImpl } from 'sprotty';
 import { Action } from 'sprotty-protocol';
@@ -69,2 +69,2 @@ import { Direction, KNode } from '../constraint-classes';
  */
-export declare function setProperty(nodes: KNode[], layers: Layer[], target: SModelElement): Action;
+export declare function setProperty(nodes: KNode[], layers: Layer[], target: SModelElementImpl): Action;

lib/layered/constraint-utils.js

@@ -20,6 +20,6 @@ "use strict";
 exports.setProperty = exports.shouldOnlyLCBeSet = exports.isLayerForbidden = exports.getPositionInLayer = exports.getNodesOfLayer = exports.getLayers = exports.getActualTargetIndex = exports.getActualLayer = exports.getLayerOfNode = exports.ONE_LAYER_PADDING = exports.PLACEMENT_TOP_BOTTOM_OFFSET = void 0;
-var actions_1 = require("../actions");
-var constraint_classes_1 = require("../constraint-classes");
-var actions_2 = require("./actions");
-var constraint_types_1 = require("./constraint-types");
+const actions_1 = require("../actions");
+const constraint_classes_1 = require("../constraint-classes");
+const actions_2 = require("./actions");
+const constraint_types_1 = require("./constraint-types");
 /**
@@ -40,10 +40,11 @@ * Offset for placement on below or above the first/last node in the layer.
 function getLayerOfNode(node, nodes, layers, direction) {
-    var coordinateInLayoutDirection = (direction === constraint_classes_1.Direction.UNDEFINED || direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.LEFT)
-        ? node.position.x + node.size.width / 2 : node.position.y + node.size.height / 2;
+    const coordinateInLayoutDirection = direction === constraint_classes_1.Direction.UNDEFINED || direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.LEFT
+        ? node.position.x + node.size.width / 2
+        : node.position.y + node.size.height / 2;
     // check for all layers if the node is in the layer
-    for (var i = 0; i < layers.length; i++) {
-        var layer = layers[i];
-        if (coordinateInLayoutDirection < layer.end &&
-            (direction === constraint_classes_1.Direction.UNDEFINED || direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.DOWN) ||
-            coordinateInLayoutDirection > layer.end && (direction === constraint_classes_1.Direction.LEFT || direction === constraint_classes_1.Direction.UP)) {
+    for (let i = 0; i < layers.length; i++) {
+        const layer = layers[i];
+        if ((coordinateInLayoutDirection < layer.end &&
+            (direction === constraint_classes_1.Direction.UNDEFINED || direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.DOWN)) ||
+            (coordinateInLayoutDirection > layer.end && (direction === constraint_classes_1.Direction.LEFT || direction === constraint_classes_1.Direction.UP))) {
             return i;
@@ -53,3 +54,3 @@ }
     // if the node is the only one in the last layer it can not be in a new last layer
-    var lastLNodes = getNodesOfLayer(layers.length - 1, nodes);
+    const lastLNodes = getNodesOfLayer(layers.length - 1, nodes);
     if (lastLNodes.length === 1 && lastLNodes[0].selected) {
@@ -71,4 +72,5 @@ // node is in last layer
     // Examine all nodes that have a layer Id left or equal to the layerCandidate and that have a layerCons > their layerId
-    var layerConstraintLeftOfCandidate = nodes.filter(function (n) { return n.properties['org.eclipse.elk.layered.layering.layerId'] <= layerCandidate
-        && n.properties['org.eclipse.elk.layered.layering.layerChoiceConstraint'] > n.properties['org.eclipse.elk.layered.layering.layerId']; });
+    const layerConstraintLeftOfCandidate = nodes.filter((n) => n.properties['org.eclipse.elk.layered.layering.layerId'] <= layerCandidate &&
+        n.properties['org.eclipse.elk.layered.layering.layerChoiceConstraint'] >
+            n.properties['org.eclipse.elk.layered.layering.layerId']);
     // In case that there are no such nodes return the layerCandidate
@@ -81,7 +83,6 @@ if (layerConstraintLeftOfCandidate.length === 0) {
     // of shifts
-    var nodeWithMaxCons = null;
-    var maxCons = -1;
-    for (var _i = 0, layerConstraintLeftOfCandidate_1 = layerConstraintLeftOfCandidate; _i < layerConstraintLeftOfCandidate_1.length; _i++) {
-        var n = layerConstraintLeftOfCandidate_1[_i];
-        var layerConstraint = n.properties['org.eclipse.elk.layered.layering.layerChoiceConstraint'];
+    let nodeWithMaxCons = null;
+    let maxCons = -1;
+    for (const n of layerConstraintLeftOfCandidate) {
+        const layerConstraint = n.properties['org.eclipse.elk.layered.layering.layerChoiceConstraint'];
         if (layerConstraint > maxCons) {
@@ -93,3 +94,3 @@ nodeWithMaxCons = n;
     if (nodeWithMaxCons !== null) {
-        var idDiff = layerCandidate - nodeWithMaxCons.properties['org.eclipse.elk.layered.layering.layerId'];
+        const idDiff = layerCandidate - nodeWithMaxCons.properties['org.eclipse.elk.layered.layering.layerId'];
         return maxCons + idDiff;
@@ -107,11 +108,12 @@ }
 function getActualTargetIndex(targetIndex, alreadyInLayer, layerNodes) {
-    var localTargetIndex = targetIndex;
+    let localTargetIndex = targetIndex;
     if (localTargetIndex > 0) {
         // Check whether there is an user defined pos constraint on the upper neighbour that is higher
         // than its position ID
-        var upperIndex = localTargetIndex - 1;
-        var upperNeighbor = layerNodes[upperIndex];
-        var posConsOfUpper = upperNeighbor.properties['org.eclipse.elk.layered.crossingMinimization.positionChoiceConstraint'];
+        const upperIndex = localTargetIndex - 1;
+        const upperNeighbor = layerNodes[upperIndex];
+        const posConsOfUpper = upperNeighbor.properties['org.eclipse.elk.layered.crossingMinimization.positionChoiceConstraint'];
         if (posConsOfUpper > upperIndex) {
-            if (alreadyInLayer && upperNeighbor.properties['org.eclipse.elk.layered.crossingMinimization.positionId'] === localTargetIndex) {
+            if (alreadyInLayer &&
+                upperNeighbor.properties['org.eclipse.elk.layered.crossingMinimization.positionId'] === localTargetIndex) {
                 localTargetIndex = posConsOfUpper;
@@ -133,26 +135,37 @@ }
     // All nodes within one hierarchy level have the same direction
-    nodes.sort(function (a, b) { return a.properties['org.eclipse.elk.layered.layering.layerId'] - b.properties['org.eclipse.elk.layered.layering.layerId']; });
-    var layers = [];
-    var layer = 0;
+    nodes.sort((a, b) => a.properties['org.eclipse.elk.layered.layering.layerId'] -
+        b.properties['org.eclipse.elk.layered.layering.layerId']);
+    const layers = [];
+    let layer = 0;
     // Begin coordinate of layer, depending of on the layout direction this might be a x or y coordinate
-    var beginCoordinate = (direction === constraint_classes_1.Direction.UNDEFINED || direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.DOWN) ? Number.MAX_VALUE : Number.MIN_VALUE;
+    let beginCoordinate = direction === constraint_classes_1.Direction.UNDEFINED || direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.DOWN
+        ? Number.MAX_VALUE
+        : Number.MIN_VALUE;
     // End coordinate of layer, depending of on the layout direction this might be a x or y coordinate
-    var endCoordinate = (direction === constraint_classes_1.Direction.UNDEFINED || direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.DOWN) ? Number.MIN_VALUE : Number.MAX_VALUE;
-    var topBorder = Number.MAX_VALUE; // naming fits to the RIGHT direction (1)
-    var bottomBorder = Number.MIN_VALUE;
+    let endCoordinate = direction === constraint_classes_1.Direction.UNDEFINED || direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.DOWN
+        ? Number.MIN_VALUE
+        : Number.MAX_VALUE;
+    let topBorder = Number.MAX_VALUE; // naming fits to the RIGHT direction (1)
+    let bottomBorder = Number.MIN_VALUE;
     // calculate bounds of the layers
-    for (var i = 0; i < nodes.length; i++) {
-        var node = nodes[i];
+    for (let i = 0; i < nodes.length; i++) {
+        const node = nodes[i];
         if (node.properties['org.eclipse.elk.layered.layering.layerId'] !== layer) {
             // node is in the next layer
             layers[layer] = new constraint_types_1.Layer(beginCoordinate, endCoordinate, beginCoordinate + (endCoordinate - beginCoordinate) / 2, direction);
-            beginCoordinate = (direction === constraint_classes_1.Direction.UNDEFINED || direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.DOWN) ? Number.MAX_VALUE : Number.MIN_VALUE;
-            endCoordinate = (direction === constraint_classes_1.Direction.UNDEFINED || direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.DOWN) ? Number.MIN_VALUE : Number.MAX_VALUE;
+            beginCoordinate =
+                direction === constraint_classes_1.Direction.UNDEFINED || direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.DOWN
+                    ? Number.MAX_VALUE
+                    : Number.MIN_VALUE;
+            endCoordinate =
+                direction === constraint_classes_1.Direction.UNDEFINED || direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.DOWN
+                    ? Number.MIN_VALUE
+                    : Number.MAX_VALUE;
             layer++;
         }
         // coordinates of the current node for case 1
-        var currentBegin = 0;
-        var currentEnd = 0;
-        var currentTopBorder = 0;
-        var currentBottomBorder = 0;
+        let currentBegin = 0;
+        let currentEnd = 0;
+        let currentTopBorder = 0;
+        let currentBottomBorder = 0;
         switch (direction) {
@@ -188,8 +201,15 @@ case constraint_classes_1.Direction.UNDEFINED:
             }
+            default: {
+                console.error('error in constraint-utils.ts, unexpected direction in switch');
+            }
         }
         // update coordinates of the current layer
-        beginCoordinate = (direction === constraint_classes_1.Direction.UNDEFINED || direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.DOWN) ?
-            Math.min(currentBegin, beginCoordinate) : Math.max(currentBegin, beginCoordinate);
-        endCoordinate = (direction === constraint_classes_1.Direction.UNDEFINED || direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.DOWN) ?
-            Math.max(currentEnd, endCoordinate) : Math.min(currentEnd, endCoordinate);
+        beginCoordinate =
+            direction === constraint_classes_1.Direction.UNDEFINED || direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.DOWN
+                ? Math.min(currentBegin, beginCoordinate)
+                : Math.max(currentBegin, beginCoordinate);
+        endCoordinate =
+            direction === constraint_classes_1.Direction.UNDEFINED || direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.DOWN
+                ? Math.max(currentEnd, endCoordinate)
+                : Math.min(currentEnd, endCoordinate);
         topBorder = Math.min(currentTopBorder, topBorder);
@@ -199,12 +219,12 @@ bottomBorder = Math.max(currentBottomBorder, bottomBorder);
     // add last layer
-    layers[layer] = new constraint_types_1.Layer(beginCoordinate, endCoordinate, beginCoordinate + ((endCoordinate - beginCoordinate) / 2), direction);
+    layers[layer] = new constraint_types_1.Layer(beginCoordinate, endCoordinate, beginCoordinate + (endCoordinate - beginCoordinate) / 2, direction);
     // offset above & below the layers
-    topBorder = topBorder - exports.PLACEMENT_TOP_BOTTOM_OFFSET;
-    bottomBorder = bottomBorder + exports.PLACEMENT_TOP_BOTTOM_OFFSET;
+    topBorder -= exports.PLACEMENT_TOP_BOTTOM_OFFSET;
+    bottomBorder += exports.PLACEMENT_TOP_BOTTOM_OFFSET;
     // update left and right bounds of the layers and set y bounds
-    for (var i = 0; i < layers.length - 1; i++) {
+    for (let i = 0; i < layers.length - 1; i++) {
         // calculate the mid between two layers
-        var currentLayer = layers[i];
-        var precedingLayer = layers[i + 1];
-        var mid = currentLayer.end + (precedingLayer.begin - currentLayer.end) / 2;
+        const currentLayer = layers[i];
+        const precedingLayer = layers[i + 1];
+        const mid = currentLayer.end + (precedingLayer.begin - currentLayer.end) / 2;
         // set right bound of the first and left bound of the second layer to the calculated mid
@@ -219,3 +239,3 @@ currentLayer.end = mid;
     if (layers.length === 1) {
-        var firstLayer = layers[0];
+        const firstLayer = layers[0];
         // add padding
@@ -225,4 +245,4 @@ switch (direction) {
             case constraint_classes_1.Direction.RIGHT: {
-                firstLayer.begin = firstLayer.begin - exports.ONE_LAYER_PADDING;
-                firstLayer.end = firstLayer.end + exports.ONE_LAYER_PADDING;
+                firstLayer.begin -= exports.ONE_LAYER_PADDING;
+                firstLayer.end += exports.ONE_LAYER_PADDING;
                 firstLayer.topBorder = topBorder;
@@ -233,4 +253,4 @@ firstLayer.bottomBorder = bottomBorder;
             case constraint_classes_1.Direction.LEFT: {
-                firstLayer.begin = firstLayer.begin + exports.ONE_LAYER_PADDING;
-                firstLayer.end = firstLayer.end - exports.ONE_LAYER_PADDING;
+                firstLayer.begin += exports.ONE_LAYER_PADDING;
+                firstLayer.end -= exports.ONE_LAYER_PADDING;
                 firstLayer.topBorder = topBorder;
@@ -241,4 +261,4 @@ firstLayer.bottomBorder = bottomBorder;
             case constraint_classes_1.Direction.DOWN: {
-                firstLayer.begin = firstLayer.begin - exports.ONE_LAYER_PADDING;
-                firstLayer.end = firstLayer.end + exports.ONE_LAYER_PADDING;
+                firstLayer.begin -= exports.ONE_LAYER_PADDING;
+                firstLayer.end += exports.ONE_LAYER_PADDING;
                 firstLayer.topBorder = topBorder;
@@ -249,4 +269,4 @@ firstLayer.bottomBorder = bottomBorder;
             case constraint_classes_1.Direction.UP: {
-                firstLayer.begin = firstLayer.begin + exports.ONE_LAYER_PADDING;
-                firstLayer.end = firstLayer.end - exports.ONE_LAYER_PADDING;
+                firstLayer.begin += exports.ONE_LAYER_PADDING;
+                firstLayer.end -= exports.ONE_LAYER_PADDING;
                 firstLayer.topBorder = topBorder;
@@ -256,2 +276,5 @@ firstLayer.bottomBorder = bottomBorder;
             }
+            default: {
+                console.error('error in constraint-utils.ts, unexpected direction in switch');
+            }
         }
@@ -262,10 +285,10 @@ }
         // add padding
-        var firstLayer = layers[0];
+        const firstLayer = layers[0];
         firstLayer.begin = firstLayer.mid - (firstLayer.end - firstLayer.mid);
         // update bounds of the last layer
         // left bound of the layer is the right bound of the layer left of it
-        var lastLayer = layers[layers.length - 1];
+        const lastLayer = layers[layers.length - 1];
         lastLayer.begin = layers[layers.length - 2].end;
         // distance from mid of the last layer to the right bound should be the same as to the left bound
-        var distance = lastLayer.mid - lastLayer.begin;
+        const distance = lastLayer.mid - lastLayer.begin;
         lastLayer.end = lastLayer.mid + distance;
@@ -285,5 +308,4 @@ // set y coordinates
 function getNodesOfLayer(layer, nodes) {
-    var nodesOfLayer = [];
-    for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {
-        var node = nodes_1[_i];
+    const nodesOfLayer = [];
+    for (const node of nodes) {
         if (node.properties['org.eclipse.elk.layered.layering.layerId'] === layer) {
@@ -303,3 +325,3 @@ nodesOfLayer[nodesOfLayer.length] = node;
     // Sort the layer array by y coordinate.
-    nodes.sort(function (a, b) { return a.position.y - b.position.y; });
+    nodes.sort((a, b) => a.position.y - b.position.y);
     // Find the position of the target
@@ -310,3 +332,3 @@ if (nodes.indexOf(target) !== -1) {
     }
-    for (var i = 0; i < nodes.length; i++) {
+    for (let i = 0; i < nodes.length; i++) {
         if (target.position.y < nodes[i].position.y) {
@@ -328,19 +350,16 @@ return i;
     // collect the connected nodes
-    var connectedNodes = [];
-    var edges = node.outgoingEdges;
-    for (var _i = 0, edges_1 = edges; _i < edges_1.length; _i++) {
-        var edge = edges_1[_i];
+    const connectedNodes = [];
+    let edges = node.outgoingEdges;
+    for (const edge of edges) {
         connectedNodes[connectedNodes.length] = edge.target;
     }
     edges = node.incomingEdges;
-    for (var _a = 0, edges_2 = edges; _a < edges_2.length; _a++) {
-        var edge = edges_2[_a];
+    for (const edge of edges) {
         connectedNodes[connectedNodes.length] = edge.source;
     }
     // check the connected nodes for layer constraints
-    for (var _b = 0, connectedNodes_1 = connectedNodes; _b < connectedNodes_1.length; _b++) {
-        var node_1 = connectedNodes_1[_b];
-        if (node_1.properties['org.eclipse.elk.layered.layering.layerId'] === layer
-            && node_1.properties['org.eclipse.elk.layered.layering.layerChoiceConstraint'] !== -1
-            && node_1.properties['org.eclipse.elk.layered.layering.layerChoiceConstraint'] !== undefined) {
+    for (const connectedNode of connectedNodes) {
+        if (connectedNode.properties['org.eclipse.elk.layered.layering.layerId'] === layer &&
+            connectedNode.properties['org.eclipse.elk.layered.layering.layerChoiceConstraint'] !== -1 &&
+            connectedNode.properties['org.eclipse.elk.layered.layering.layerChoiceConstraint'] !== undefined) {
             // layer is forbidden for the given node
@@ -360,7 +379,8 @@ return true;
 function shouldOnlyLCBeSet(node, layers, direction) {
-    var coordinateToCheck = (direction === constraint_classes_1.Direction.UNDEFINED || direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.LEFT) ?
-        node.position.y : node.position.x;
+    const coordinateToCheck = direction === constraint_classes_1.Direction.UNDEFINED || direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.LEFT
+        ? node.position.y
+        : node.position.x;
     if (layers.length !== 0) {
-        var layerTop = layers[0].topBorder;
-        var layerBot = layers[0].bottomBorder;
+        const layerTop = layers[0].topBorder;
+        const layerBot = layers[0].bottomBorder;
         // if the node is below or above the layer only the layer constraint should be set
@@ -377,11 +397,11 @@ return coordinateToCheck < layerTop || coordinateToCheck > layerBot;
 function setProperty(nodes, layers, target) {
-    var targetNode = target;
-    var direction = targetNode.direction;
+    const targetNode = target;
+    const { direction } = targetNode;
     // calculate layer and position the target has in the graph at the new position
-    var layerOfTarget = getLayerOfNode(targetNode, nodes, layers, direction);
-    var nodesOfLayer = getNodesOfLayer(layerOfTarget, nodes);
-    var positionOfTarget = getPositionInLayer(nodesOfLayer, targetNode);
-    var newPositionCons = getActualTargetIndex(positionOfTarget, nodesOfLayer.indexOf(targetNode) !== -1, nodesOfLayer);
-    var newLayerCons = getActualLayer(targetNode, nodes, layerOfTarget);
-    var forbidden = isLayerForbidden(targetNode, newLayerCons);
+    const layerOfTarget = getLayerOfNode(targetNode, nodes, layers, direction);
+    const nodesOfLayer = getNodesOfLayer(layerOfTarget, nodes);
+    const positionOfTarget = getPositionInLayer(nodesOfLayer, targetNode);
+    const newPositionCons = getActualTargetIndex(positionOfTarget, nodesOfLayer.indexOf(targetNode) !== -1, nodesOfLayer);
+    const newLayerCons = getActualLayer(targetNode, nodes, layerOfTarget);
+    const forbidden = isLayerForbidden(targetNode, newLayerCons);
     if (forbidden) {
@@ -391,3 +411,3 @@ // If layer is forbidden just refresh
     }
-    else if (targetNode.properties['org.eclipse.elk.layered.layering.layerId'] !== layerOfTarget) {
+    if (targetNode.properties['org.eclipse.elk.layered.layering.layerId'] !== layerOfTarget) {
         // layer constraint should only be set if the layer index changed
@@ -399,26 +419,22 @@ if (shouldOnlyLCBeSet(targetNode, layers, direction)) {
                 layer: layerOfTarget,
-                layerCons: newLayerCons
-            });
-        }
-        else {
-            // If layer and position constraint should be set - send them both in one StaticConstraint
-            return actions_2.SetStaticConstraintAction.create({
-                id: targetNode.id,
-                layer: layerOfTarget,
                 layerCons: newLayerCons,
-                position: positionOfTarget,
-                posCons: newPositionCons
             });
         }
+        // If layer and position constraint should be set - send them both in one StaticConstraint
+        return actions_2.SetStaticConstraintAction.create({
+            id: targetNode.id,
+            layer: layerOfTarget,
+            layerCons: newLayerCons,
+            position: positionOfTarget,
+            posCons: newPositionCons,
+        });
     }
-    else {
-        // position constraint should only be set if the position of the node changed
-        if (targetNode.properties['org.eclipse.elk.layered.crossingMinimization.positionId'] !== positionOfTarget) {
-            // set the position Constraint
-            return actions_2.SetPositionConstraintAction.create({
-                id: targetNode.id,
-                position: positionOfTarget,
-                posCons: newPositionCons
-            });
-        }
+    // position constraint should only be set if the position of the node changed
+    if (targetNode.properties['org.eclipse.elk.layered.crossingMinimization.positionId'] !== positionOfTarget) {
+        // set the position Constraint
+        return actions_2.SetPositionConstraintAction.create({
+            id: targetNode.id,
+            position: positionOfTarget,
+            posCons: newPositionCons,
+        });
     }
@@ -425,0 +441,0 @@ // If the node was moved without setting a constraint - let it snap back

lib/layered/layered-interactive-view.d.ts

 /** @jsx svg */
-import { VNode } from "snabbdom";
+import { VNode } from 'snabbdom';
 import { Direction, KNode } from '../constraint-classes';
@@ -4,0 +4,0 @@ import { Layer } from './constraint-types';

lib/layered/layered-interactive-view.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderLayeredConstraint = exports.renderPositions = exports.renderHierarchyLevel = void 0;
-var sprotty_1 = require("sprotty"); // eslint-disable-line @typescript-eslint/no-unused-vars
-var constraint_classes_1 = require("../constraint-classes");
-var helper_methods_1 = require("../helper-methods");
-var interactive_view_objects_1 = require("../interactive-view-objects");
-var constraint_utils_1 = require("./constraint-utils");
+const sprotty_1 = require("sprotty"); // eslint-disable-line @typescript-eslint/no-unused-vars
+const constraint_classes_1 = require("../constraint-classes");
+const helper_methods_1 = require("../helper-methods");
+const interactive_view_objects_1 = require("../interactive-view-objects");
+const constraint_utils_1 = require("./constraint-utils");
 /**
@@ -16,34 +16,33 @@ * Visualize the layer the selected node is in as a rectangle and all other layers as a vertical line.
 function renderHierarchyLevel(nodes) {
-    var direction = nodes[0].direction;
-    var selNode = (0, helper_methods_1.getSelectedNode)(nodes);
+    const { direction } = nodes[0];
+    const selNode = (0, helper_methods_1.getSelectedNode)(nodes);
     if (selNode !== undefined) {
-        var layers = (0, constraint_utils_1.getLayers)(nodes, direction);
-        var currentLayer = (0, constraint_utils_1.getLayerOfNode)(selNode, nodes, layers, direction);
-        var forbidden = (0, constraint_utils_1.isLayerForbidden)(selNode, currentLayer);
+        const layers = (0, constraint_utils_1.getLayers)(nodes, direction);
+        const currentLayer = (0, constraint_utils_1.getLayerOfNode)(selNode, nodes, layers, direction);
+        const forbidden = (0, constraint_utils_1.isLayerForbidden)(selNode, currentLayer);
         // y coordinates of the layers
-        var topBorder = layers[0].topBorder;
-        var bottomBorder = layers[0].bottomBorder;
+        const { topBorder } = layers[0];
+        const { bottomBorder } = layers[0];
         // let globalEndCoordinate = layers[layers.length - 1].end
         // determines whether only the layer constraint will be set when the node is released
-        var onlyLC = (0, constraint_utils_1.shouldOnlyLCBeSet)(selNode, layers, direction) && selNode.properties['org.eclipse.elk.layered.layering.layerId'] !== currentLayer;
+        const onlyLC = (0, constraint_utils_1.shouldOnlyLCBeSet)(selNode, layers, direction) &&
+            selNode.properties['org.eclipse.elk.layered.layering.layerId'] !== currentLayer;
         // create layers
-        var result = (0, sprotty_1.svg)("g", null);
-        for (var i = 0; i < layers.length; i++) {
-            var layer = layers[i];
+        let result = (0, sprotty_1.svg)("g", null);
+        for (let i = 0; i < layers.length; i++) {
+            const layer = layers[i];
             if (i === currentLayer) {
-                result = (0, sprotty_1.svg)("g", null,
+                result = ((0, sprotty_1.svg)("g", null,
                     result,
-                    (0, interactive_view_objects_1.createRect)(layer.begin, layer.end, topBorder, bottomBorder, forbidden, onlyLC, direction));
+                    (0, interactive_view_objects_1.createRect)(layer.begin, layer.end, topBorder, bottomBorder, forbidden, onlyLC, direction)));
             }
-            else {
-                if (!(0, constraint_utils_1.isLayerForbidden)(selNode, i)) {
-                    result = (0, sprotty_1.svg)("g", null,
-                        result,
-                        (0, interactive_view_objects_1.createVerticalLine)(layer.mid, topBorder, bottomBorder, direction));
-                }
+            else if (!(0, constraint_utils_1.isLayerForbidden)(selNode, i)) {
+                result = ((0, sprotty_1.svg)("g", null,
+                    result,
+                    (0, interactive_view_objects_1.createVerticalLine)(layer.mid, topBorder, bottomBorder, direction)));
             }
         }
         // Show a new empty last layer the node can be moved to
-        var lastLayer = layers[layers.length - 1];
-        var lastLNodes = (0, constraint_utils_1.getNodesOfLayer)(layers.length - 1, nodes);
+        const lastLayer = layers[layers.length - 1];
+        const lastLNodes = (0, constraint_utils_1.getNodesOfLayer)(layers.length - 1, nodes);
         if (lastLNodes.length !== 1 || !lastLNodes[0].selected) {
@@ -53,10 +52,10 @@ // Only show the layer if the moved node is not (the only node) in the last layer
             if (currentLayer === layers.length) {
-                result = (0, sprotty_1.svg)("g", null,
+                result = ((0, sprotty_1.svg)("g", null,
                     result,
-                    (0, interactive_view_objects_1.createRect)(lastLayer.end, lastLayer.end + (lastLayer.end - lastLayer.begin), topBorder, bottomBorder, forbidden, onlyLC, direction));
+                    (0, interactive_view_objects_1.createRect)(lastLayer.end, lastLayer.end + (lastLayer.end - lastLayer.begin), topBorder, bottomBorder, forbidden, onlyLC, direction)));
             }
             else {
-                result = (0, sprotty_1.svg)("g", null,
+                result = ((0, sprotty_1.svg)("g", null,
                     result,
-                    (0, interactive_view_objects_1.createVerticalLine)(lastLayer.mid + (lastLayer.end - lastLayer.begin), topBorder, bottomBorder, direction));
+                    (0, interactive_view_objects_1.createVerticalLine)(lastLayer.mid + (lastLayer.end - lastLayer.begin), topBorder, bottomBorder, direction)));
             }
@@ -66,14 +65,9 @@ }
         if (!onlyLC) {
-            // @ts-ignore
-            return (0, sprotty_1.svg)("g", null,
+            return ((0, sprotty_1.svg)("g", null,
                 result,
-                renderPositions(currentLayer, nodes, layers, forbidden, direction));
+                renderPositions(currentLayer, nodes, layers, forbidden, direction)));
         }
-        else {
-            // Add available positions
-            // @ts-ignore
-            return result;
-        }
+        // Add available positions
+        return result;
     }
-    // @ts-ignore
     return (0, sprotty_1.svg)("g", null);
@@ -91,7 +85,6 @@ }
 function renderPositions(current, nodes, layers, forbidden, direction) {
-    var layerNodes = (0, constraint_utils_1.getNodesOfLayer)(current, nodes);
+    const layerNodes = (0, constraint_utils_1.getNodesOfLayer)(current, nodes);
     // get the selected node
-    var target = nodes[0];
-    for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {
-        var node = nodes_1[_i];
+    let target = nodes[0];
+    for (const node of nodes) {
         if (node.selected) {
@@ -102,12 +95,14 @@ target = node;
     // position of selected node
-    var curPos = (0, constraint_utils_1.getPositionInLayer)(layerNodes, target);
-    layerNodes.sort(function (a, b) { return a.properties['org.eclipse.elk.layered.crossingMinimization.positionId'] - b.properties['org.eclipse.elk.layered.crossingMinimization.positionId']; });
+    const curPos = (0, constraint_utils_1.getPositionInLayer)(layerNodes, target);
+    layerNodes.sort((a, b) => a.properties['org.eclipse.elk.layered.crossingMinimization.positionId'] -
+        b.properties['org.eclipse.elk.layered.crossingMinimization.positionId']);
     if (layerNodes.length > 0) {
-        var result = (0, sprotty_1.svg)("g", null);
+        let result = (0, sprotty_1.svg)("g", null);
         // mid of the current layer
-        var shift = 1;
-        var x = 0, y = 0;
+        let shift = 1;
+        let x = 0;
+        let y = 0;
         // calculate positions between nodes
-        for (var i = 0; i < layerNodes.length - 1; i++) {
-            var node = layerNodes[i];
+        for (let i = 0; i < layerNodes.length - 1; i++) {
+            const node = layerNodes[i];
             // at the old position of the selected node should not be a circle
@@ -120,4 +115,4 @@ if (!node.selected && !layerNodes[i + 1].selected) {
                         x = layers[current].mid;
-                        var topY = node.position.y + node.size.height;
-                        var botY = layerNodes[i + 1].position.y;
+                        const topY = node.position.y + node.size.height;
+                        const botY = layerNodes[i + 1].position.y;
                         y = topY + (botY - topY) / 2;
@@ -128,4 +123,4 @@ break;
                         x = layers[current].mid;
-                        var topY = node.position.y + node.size.height;
-                        var botY = layerNodes[i + 1].position.y;
+                        const topY = node.position.y + node.size.height;
+                        const botY = layerNodes[i + 1].position.y;
                         y = topY + (botY - topY) / 2;
@@ -136,4 +131,4 @@ break;
                         y = layers[current].mid;
-                        var topX = node.position.x + node.size.width;
-                        var botX = layerNodes[i + 1].position.x;
+                        const topX = node.position.x + node.size.width;
+                        const botX = layerNodes[i + 1].position.x;
                         x = topX + (botX - topX) / 2;
@@ -144,11 +139,14 @@ break;
                         y = layers[current].mid;
-                        var topX = node.position.x + node.size.width;
-                        var botX = layerNodes[i + 1].position.x;
+                        const topX = node.position.x + node.size.width;
+                        const botX = layerNodes[i + 1].position.x;
                         x = topX + (botX - topX) / 2;
                         break;
                     }
+                    default: {
+                        console.error('error in layered-interactive.view.tsx, unexpected direction in switch');
+                    }
                 }
-                result = (0, sprotty_1.svg)("g", null,
+                result = ((0, sprotty_1.svg)("g", null,
                     result,
-                    (0, interactive_view_objects_1.renderCircle)(curPos === i + shift, x, y, forbidden));
+                    (0, interactive_view_objects_1.renderCircle)(curPos === i + shift, x, y, forbidden)));
             }
@@ -160,3 +158,3 @@ else {
         // position above the first node is available if the first node is not the selected one
-        var first = layerNodes[0];
+        const first = layerNodes[0];
         if (!first.selected) {
@@ -185,9 +183,12 @@ switch (direction) {
                 }
+                default: {
+                    console.error('error in layered.interactive-view.tsx, unexpected direction in switch');
+                }
             }
-            result = (0, sprotty_1.svg)("g", null,
+            result = ((0, sprotty_1.svg)("g", null,
                 result,
-                (0, interactive_view_objects_1.renderCircle)(curPos === 0, x, y, forbidden));
+                (0, interactive_view_objects_1.renderCircle)(curPos === 0, x, y, forbidden)));
         }
         // position below the last node is available if the last node is not the selected one
-        var last = layerNodes[layerNodes.length - 1];
+        const last = layerNodes[layerNodes.length - 1];
         if (!last.selected) {
@@ -198,3 +199,5 @@ switch (direction) {
                     x = layers[current].mid;
-                    y = layers[current].bottomBorder - (layers[current].bottomBorder - (last.position.y + last.size.height)) / 2;
+                    y =
+                        layers[current].bottomBorder -
+                            (layers[current].bottomBorder - (last.position.y + last.size.height)) / 2;
                     break;
@@ -204,3 +207,5 @@ }
                     x = layers[current].mid;
-                    y = layers[current].bottomBorder - (layers[current].bottomBorder - (last.position.y + last.size.height)) / 2;
+                    y =
+                        layers[current].bottomBorder -
+                            (layers[current].bottomBorder - (last.position.y + last.size.height)) / 2;
                     break;
@@ -210,3 +215,5 @@ }
                     y = layers[current].mid;
-                    x = layers[current].bottomBorder - (layers[current].bottomBorder - (last.position.x + last.size.width)) / 2;
+                    x =
+                        layers[current].bottomBorder -
+                            (layers[current].bottomBorder - (last.position.x + last.size.width)) / 2;
                     break;
@@ -216,47 +223,52 @@ }
                     y = layers[current].mid;
-                    x = layers[current].bottomBorder - (layers[current].bottomBorder - (last.position.x + last.size.width)) / 2;
+                    x =
+                        layers[current].bottomBorder -
+                            (layers[current].bottomBorder - (last.position.x + last.size.width)) / 2;
                     break;
                 }
+                default: {
+                    console.error('error in layered.interactive-view.tsx, unexpected direction in switch');
+                }
             }
-            result = (0, sprotty_1.svg)("g", null,
+            result = ((0, sprotty_1.svg)("g", null,
                 result,
-                (0, interactive_view_objects_1.renderCircle)(curPos === layerNodes.length - 1 + shift, x, y, forbidden));
+                (0, interactive_view_objects_1.renderCircle)(curPos === layerNodes.length - 1 + shift, x, y, forbidden)));
         }
-        // @ts-ignore
         return result;
     }
-    else {
-        // there are no nodes in the layer
-        // show a circle in the middle of the layer
-        var x = 0, y = 0;
-        switch (direction) {
-            case constraint_classes_1.Direction.UNDEFINED:
-            case constraint_classes_1.Direction.RIGHT: {
-                var lastLayer = layers[layers.length - 1];
-                x = lastLayer.mid + (lastLayer.end - lastLayer.begin);
-                y = lastLayer.topBorder + (lastLayer.bottomBorder - lastLayer.topBorder) / 2;
-                break;
-            }
-            case constraint_classes_1.Direction.LEFT: {
-                var lastLayer = layers[layers.length - 1];
-                x = lastLayer.mid + (lastLayer.end - lastLayer.begin);
-                y = lastLayer.topBorder + (lastLayer.bottomBorder - lastLayer.topBorder) / 2;
-                break;
-            }
-            case constraint_classes_1.Direction.DOWN: {
-                var lastLayer = layers[layers.length - 1];
-                y = lastLayer.mid + (lastLayer.end - lastLayer.begin);
-                x = lastLayer.topBorder + (lastLayer.bottomBorder - lastLayer.topBorder) / 2;
-                break;
-            }
-            case constraint_classes_1.Direction.UP: {
-                var lastLayer = layers[layers.length - 1];
-                y = lastLayer.mid + (lastLayer.end - lastLayer.begin);
-                x = lastLayer.topBorder + (lastLayer.bottomBorder - lastLayer.topBorder) / 2;
-                break;
-            }
+    // there are no nodes in the layer
+    // show a circle in the middle of the layer
+    let x = 0;
+    let y = 0;
+    switch (direction) {
+        case constraint_classes_1.Direction.UNDEFINED:
+        case constraint_classes_1.Direction.RIGHT: {
+            const lastLayer = layers[layers.length - 1];
+            x = lastLayer.mid + (lastLayer.end - lastLayer.begin);
+            y = lastLayer.topBorder + (lastLayer.bottomBorder - lastLayer.topBorder) / 2;
+            break;
         }
-        // @ts-ignore
-        return (0, sprotty_1.svg)("g", null, (0, interactive_view_objects_1.renderCircle)(true, x, y, forbidden));
+        case constraint_classes_1.Direction.LEFT: {
+            const lastLayer = layers[layers.length - 1];
+            x = lastLayer.mid + (lastLayer.end - lastLayer.begin);
+            y = lastLayer.topBorder + (lastLayer.bottomBorder - lastLayer.topBorder) / 2;
+            break;
+        }
+        case constraint_classes_1.Direction.DOWN: {
+            const lastLayer = layers[layers.length - 1];
+            y = lastLayer.mid + (lastLayer.end - lastLayer.begin);
+            x = lastLayer.topBorder + (lastLayer.bottomBorder - lastLayer.topBorder) / 2;
+            break;
+        }
+        case constraint_classes_1.Direction.UP: {
+            const lastLayer = layers[layers.length - 1];
+            y = lastLayer.mid + (lastLayer.end - lastLayer.begin);
+            x = lastLayer.topBorder + (lastLayer.bottomBorder - lastLayer.topBorder) / 2;
+            break;
+        }
+        default: {
+            console.error('error in layered.interactive-view.tsx, unexpected direction in switch');
+        }
     }
+    return (0, sprotty_1.svg)("g", null, (0, interactive_view_objects_1.renderCircle)(true, x, y, forbidden));
 }
@@ -269,9 +281,12 @@ exports.renderPositions = renderPositions;
 function renderLayeredConstraint(node) {
-    var result = (0, sprotty_1.svg)("g", null);
-    var x = node.size.width;
-    var y = 0;
-    var constraintOffset = 2;
-    var positionConstraint = node.properties['org.eclipse.elk.layered.crossingMinimization.positionChoiceConstraint'];
-    var layerConstraint = node.properties['org.eclipse.elk.layered.layering.layerChoiceConstraint'];
-    if (layerConstraint !== -1 && positionConstraint !== -1 && layerConstraint !== undefined && positionConstraint !== undefined) {
+    let result = (0, sprotty_1.svg)("g", null);
+    const x = node.size.width;
+    const y = 0;
+    const constraintOffset = 2;
+    const positionConstraint = node.properties['org.eclipse.elk.layered.crossingMinimization.positionChoiceConstraint'];
+    const layerConstraint = node.properties['org.eclipse.elk.layered.layering.layerChoiceConstraint'];
+    if (layerConstraint !== -1 &&
+        positionConstraint !== -1 &&
+        layerConstraint !== undefined &&
+        positionConstraint !== undefined) {
         // layer and position Constraint are set
@@ -288,10 +303,9 @@ result = (0, sprotty_1.svg)("g", null, (0, interactive_view_objects_1.renderLock)(x, y));
     }
-    // @ts-ignore
     return result;
 }
 exports.renderLayeredConstraint = renderLayeredConstraint;
-var verticalArrowXOffset = -2.5;
-var verticalArrowYOffset = -5;
-var horizontalArrowXOffset = -0.3;
-var horizontalArrowYOffset = -0.7;
+const verticalArrowXOffset = -2.5;
+const verticalArrowYOffset = -5;
+const horizontalArrowXOffset = -0.3;
+const horizontalArrowYOffset = -0.7;
 /**
@@ -303,10 +317,11 @@ * Creates an icon that visualizes a layer constraint.
 function renderLayerConstraint(x, y, direction) {
-    var vertical = !(direction === constraint_classes_1.Direction.UNDEFINED || direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.LEFT);
-    var xOffset = vertical ? verticalArrowXOffset : horizontalArrowXOffset;
-    var yOffset = vertical ? verticalArrowYOffset : horizontalArrowYOffset;
-    // @ts-ignore
-    return (0, sprotty_1.svg)("g", null,
-        " ",
+    const vertical = !(direction === constraint_classes_1.Direction.UNDEFINED ||
+        direction === constraint_classes_1.Direction.RIGHT ||
+        direction === constraint_classes_1.Direction.LEFT);
+    const xOffset = vertical ? verticalArrowXOffset : horizontalArrowXOffset;
+    const yOffset = vertical ? verticalArrowYOffset : horizontalArrowYOffset;
+    return ((0, sprotty_1.svg)("g", null,
+        ' ',
         (0, interactive_view_objects_1.renderLock)(x, y),
-        (0, interactive_view_objects_1.renderArrow)(x + xOffset, y + yOffset, vertical));
+        (0, interactive_view_objects_1.renderArrow)(x + xOffset, y + yOffset, vertical)));
 }
@@ -319,11 +334,10 @@ /**
 function renderPositionConstraint(x, y, direction) {
-    var vertical = (direction === constraint_classes_1.Direction.UNDEFINED || direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.LEFT);
-    var xOffset = vertical ? verticalArrowXOffset : horizontalArrowXOffset;
-    var yOffset = vertical ? verticalArrowYOffset : horizontalArrowYOffset;
-    // @ts-ignore
-    return (0, sprotty_1.svg)("g", null,
-        " ",
+    const vertical = direction === constraint_classes_1.Direction.UNDEFINED || direction === constraint_classes_1.Direction.RIGHT || direction === constraint_classes_1.Direction.LEFT;
+    const xOffset = vertical ? verticalArrowXOffset : horizontalArrowXOffset;
+    const yOffset = vertical ? verticalArrowYOffset : horizontalArrowYOffset;
+    return ((0, sprotty_1.svg)("g", null,
+        ' ',
         (0, interactive_view_objects_1.renderLock)(x, y),
-        (0, interactive_view_objects_1.renderArrow)(x + xOffset, y + yOffset, vertical));
+        (0, interactive_view_objects_1.renderArrow)(x + xOffset, y + yOffset, vertical)));
 }
 //# sourceMappingURL=layered-interactive-view.js.map

lib/rect-packing/actions.js

@@ -18,2 +18,4 @@ "use strict";
  */
+// We follow Sprotty's way of redeclaring the interface and its create function, so disable this lint check for this file.
+/* eslint-disable no-redeclare */
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -27,7 +29,7 @@ exports.RectPackSetPositionConstraintAction = exports.RectPackDeletePositionConstraintAction = exports.SetAspectRatioAction = void 0;
             kind: SetAspectRatioAction.KIND,
-            constraint: constraint,
+            constraint,
         };
     }
     SetAspectRatioAction.create = create;
-})(SetAspectRatioAction = exports.SetAspectRatioAction || (exports.SetAspectRatioAction = {}));
+})(SetAspectRatioAction || (exports.SetAspectRatioAction = SetAspectRatioAction = {}));
 var RectPackDeletePositionConstraintAction;
@@ -39,7 +41,7 @@ (function (RectPackDeletePositionConstraintAction) {
             kind: RectPackDeletePositionConstraintAction.KIND,
-            constraint: constraint,
+            constraint,
         };
     }
     RectPackDeletePositionConstraintAction.create = create;
-})(RectPackDeletePositionConstraintAction = exports.RectPackDeletePositionConstraintAction || (exports.RectPackDeletePositionConstraintAction = {}));
+})(RectPackDeletePositionConstraintAction || (exports.RectPackDeletePositionConstraintAction = RectPackDeletePositionConstraintAction = {}));
 var RectPackSetPositionConstraintAction;
@@ -51,7 +53,7 @@ (function (RectPackSetPositionConstraintAction) {
             kind: RectPackSetPositionConstraintAction.KIND,
-            constraint: constraint,
+            constraint,
         };
     }
     RectPackSetPositionConstraintAction.create = create;
-})(RectPackSetPositionConstraintAction = exports.RectPackSetPositionConstraintAction || (exports.RectPackSetPositionConstraintAction = {}));
+})(RectPackSetPositionConstraintAction || (exports.RectPackSetPositionConstraintAction = RectPackSetPositionConstraintAction = {}));
 //# sourceMappingURL=actions.js.map

lib/rect-packing/constraint-types.js

@@ -23,7 +23,4 @@ "use strict";
  */
-var AspectRatio = /** @class */ (function () {
-    function AspectRatio() {
-    }
-    return AspectRatio;
-}());
+class AspectRatio {
+}
 exports.AspectRatio = AspectRatio;
@@ -33,7 +30,4 @@ /**
  */
-var RectPackDeletePositionConstraint = /** @class */ (function () {
-    function RectPackDeletePositionConstraint() {
-    }
-    return RectPackDeletePositionConstraint;
-}());
+class RectPackDeletePositionConstraint {
+}
 exports.RectPackDeletePositionConstraint = RectPackDeletePositionConstraint;
@@ -43,8 +37,5 @@ /**
  */
-var RectPackSetPositionConstraint = /** @class */ (function () {
-    function RectPackSetPositionConstraint() {
-    }
-    return RectPackSetPositionConstraint;
-}());
+class RectPackSetPositionConstraint {
+}
 exports.RectPackSetPositionConstraint = RectPackSetPositionConstraint;
 //# sourceMappingURL=constraint-types.js.map

lib/rect-packing/constraint-util.js

@@ -20,6 +20,7 @@ "use strict";
 exports.setGenerateRectPackAction = void 0;
-var sprotty_1 = require("sprotty");
-var sprotty_protocol_1 = require("sprotty-protocol");
-var actions_1 = require("./actions");
-var actions_2 = require("../actions");
+const sprotty_1 = require("sprotty");
+const sprotty_protocol_1 = require("sprotty-protocol");
+const actions_1 = require("./actions");
+const actions_2 = require("../actions");
+/* global MouseEvent */
 /**
@@ -34,20 +35,19 @@ * Generate the correct action for the target node released at the specific position.
     // If node is not put to a valid position the diagram will be refreshed.
-    var result = actions_2.RefreshDiagramAction.create();
+    let result = actions_2.RefreshDiagramAction.create();
     // If the node is moved on top of another node it takes its place.
-    nodes.forEach(function (node) {
+    nodes.forEach((node) => {
         if (node.id !== target.id) {
-            var targetBounds = (0, sprotty_1.getAbsoluteBounds)(node);
-            var canvasBounds = target.root.canvasBounds;
-            var boundsInWindow = sprotty_protocol_1.Bounds.translate(targetBounds, canvasBounds);
-            var lowX = boundsInWindow.x;
-            var lowY = boundsInWindow.y;
-            var highX = boundsInWindow.x + boundsInWindow.width;
-            var highY = boundsInWindow.y + boundsInWindow.height;
-            if (event.pageX > lowX && event.pageX < highX
-                && event.pageY > lowY && event.pageY < highY) {
-                var actualPosition = node.properties['org.eclipse.elk.rectPacking.currentPosition'];
+            const targetBounds = (0, sprotty_1.getAbsoluteBounds)(node);
+            const { canvasBounds } = target.root;
+            const boundsInWindow = sprotty_protocol_1.Bounds.translate(targetBounds, canvasBounds);
+            const lowX = boundsInWindow.x;
+            const lowY = boundsInWindow.y;
+            const highX = boundsInWindow.x + boundsInWindow.width;
+            const highY = boundsInWindow.y + boundsInWindow.height;
+            if (event.pageX > lowX && event.pageX < highX && event.pageY > lowY && event.pageY < highY) {
+                let actualPosition = node.properties['org.eclipse.elk.rectPacking.currentPosition'];
                 if (node.properties['org.eclipse.elk.alg.rectpacking.desiredPosition'] !== -1) {
                     actualPosition = node.properties['org.eclipse.elk.alg.rectpacking.desiredPosition'];
                 }
-                var actualTargetPosition = target.properties['org.eclipse.elk.rectPacking.currentPosition'];
+                let actualTargetPosition = target.properties['org.eclipse.elk.rectPacking.currentPosition'];
                 if (node.properties['org.eclipse.elk.alg.rectpacking.desiredPosition'] !== -1) {
@@ -58,3 +58,4 @@ actualTargetPosition = target.properties['org.eclipse.elk.alg.rectpacking.desiredPosition'];
                     result = actions_1.RectPackSetPositionConstraintAction.create({
-                        id: target.id, order: actualPosition
+                        id: target.id,
+                        order: actualPosition,
                     });
@@ -68,21 +69,21 @@ }
         // Calculate aspect ratio.
-        var x_1 = Number.MAX_VALUE;
-        var y_1 = Number.MAX_VALUE;
-        var maxX_1 = Number.MIN_VALUE;
-        var maxY_1 = Number.MIN_VALUE;
-        nodes.forEach(function (node) {
-            if (node.position.x < x_1) {
-                x_1 = node.position.x;
+        let x = Number.MAX_VALUE;
+        let y = Number.MAX_VALUE;
+        let maxX = Number.MIN_VALUE;
+        let maxY = Number.MIN_VALUE;
+        nodes.forEach((node) => {
+            if (node.position.x < x) {
+                x = node.position.x;
             }
-            if (node.position.y < y_1) {
-                y_1 = node.position.y;
+            if (node.position.y < y) {
+                y = node.position.y;
             }
-            if (node.position.x + node.size.width > maxX_1) {
-                maxX_1 = node.position.x + node.size.width;
+            if (node.position.x + node.size.width > maxX) {
+                maxX = node.position.x + node.size.width;
             }
-            if (node.position.y + node.size.height > maxY_1) {
-                maxY_1 = node.position.y + node.size.height;
+            if (node.position.y + node.size.height > maxY) {
+                maxY = node.position.y + node.size.height;
             }
         });
-        var aspectRatio = (maxX_1 - x_1) / (maxY_1 - y_1);
+        const aspectRatio = (maxX - x) / (maxY - y);
         // If changed update aspect ratio.
@@ -92,3 +93,3 @@ if (parent && parent.properties['org.eclipse.elk.rectPacking.aspectRatio'] !== aspectRatio) {
                 id: parent.id,
-                aspectRatio: aspectRatio
+                aspectRatio,
             });
@@ -95,0 +96,0 @@ }

lib/rect-packing/rect-packing-interactive-view.d.ts

 /** @jsx svg */
-import { VNode } from "snabbdom";
+import { VNode } from 'snabbdom';
 import { KNode } from '../constraint-classes';
 /**
-* Visualize the layer the selected node is in as a rectangle and all other layers as a vertical line.
-* The rectangle contains circles indicating the available positions.
-* @param node All nodes in the hierarchical level for which the layers should be visualized.
-* @param root Root of the hierarchical level.
-*/
+ * Visualize the layer the selected node is in as a rectangle and all other layers as a vertical line.
+ * The rectangle contains circles indicating the available positions.
+ * @param node All nodes in the hierarchical level for which the layers should be visualized.
+ * @param root Root of the hierarchical level.
+ */
 export declare function renderHierarchyLevel(nodes: KNode[]): VNode;
@@ -11,0 +11,0 @@ /**

lib/rect-packing/rect-packing-interactive-view.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderRectPackConstraint = exports.renderHierarchyLevel = void 0;
-var sprotty_1 = require("sprotty"); // eslint-disable-line @typescript-eslint/no-unused-vars
-var interactive_view_objects_1 = require("../interactive-view-objects");
-var boundingBoxMargin = 5;
-var lockOffset = 7;
+const sprotty_1 = require("sprotty"); // eslint-disable-line @typescript-eslint/no-unused-vars
+const interactive_view_objects_1 = require("../interactive-view-objects");
+const boundingBoxMargin = 5;
+const lockOffset = 7;
 /**
-* Visualize the layer the selected node is in as a rectangle and all other layers as a vertical line.
-* The rectangle contains circles indicating the available positions.
-* @param node All nodes in the hierarchical level for which the layers should be visualized.
-* @param root Root of the hierarchical level.
-*/
+ * Visualize the layer the selected node is in as a rectangle and all other layers as a vertical line.
+ * The rectangle contains circles indicating the available positions.
+ * @param node All nodes in the hierarchical level for which the layers should be visualized.
+ * @param root Root of the hierarchical level.
+ */
 function renderHierarchyLevel(nodes) {
     // Draw rect around all child nodes
-    var color = 'grey';
-    var x = Number.MAX_VALUE;
-    var y = Number.MAX_VALUE;
-    var maxX = Number.MIN_VALUE;
-    var maxY = Number.MIN_VALUE;
-    nodes.forEach(function (node) {
+    const color = 'grey';
+    let x = Number.MAX_VALUE;
+    let y = Number.MAX_VALUE;
+    let maxX = Number.MIN_VALUE;
+    let maxY = Number.MIN_VALUE;
+    nodes.forEach((node) => {
         if (node.position.x < x) {
@@ -35,4 +35,4 @@ x = node.position.x;
     });
-    return (0, sprotty_1.svg)("g", null,
-        (0, sprotty_1.svg)("rect", { x: x - boundingBoxMargin, y: y - boundingBoxMargin, width: maxX - x + 2 * boundingBoxMargin, height: maxY - y + 2 * boundingBoxMargin, stroke: color, fill: 'rgba(0,0,0,0)', strokeWidth: 2 * boundingBoxMargin, style: { 'stroke-dasharray': '4' } }));
+    return ((0, sprotty_1.svg)("g", null,
+        (0, sprotty_1.svg)("rect", { x: x - boundingBoxMargin, y: y - boundingBoxMargin, width: maxX - x + 2 * boundingBoxMargin, height: maxY - y + 2 * boundingBoxMargin, stroke: color, fill: "rgba(0,0,0,0)", strokeWidth: 2 * boundingBoxMargin, style: { 'stroke-dasharray': '4' } })));
 }
@@ -39,0 +39,0 @@ exports.renderHierarchyLevel = renderHierarchyLevel;

lib/svg-path.js

@@ -25,5 +25,5 @@ "use strict";
  */
-exports.lockPath = "M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 " +
-    "152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 " +
-    "0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z";
+exports.lockPath = 'M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 ' +
+    '152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 ' +
+    '0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z';
 /**
@@ -34,5 +34,5 @@ * Font Awesome arrows-alt-v icon.
  */
-exports.arrowVertical = "M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 " +
-    "7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 " +
-    "0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z";
+exports.arrowVertical = 'M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 ' +
+    '7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 ' +
+    '0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z';
 /**
@@ -43,5 +43,5 @@ * Font Awesome arrows-alt-h icon.
  */
-exports.arrowHorizontal = "M377.941 169.941V216H134.059v-46.059c0-21.382-25.851-32.09-40.971-16.971L7.029 " +
-    "239.029c-9.373 9.373-9.373 24.568 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971V296h243.882v46.059c0 " +
-    "21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.568 0-33.941l-86.059-86.059c-15.119-15.12-40.971-4.412-40.971 16.97z";
+exports.arrowHorizontal = 'M377.941 169.941V216H134.059v-46.059c0-21.382-25.851-32.09-40.971-16.971L7.029 ' +
+    '239.029c-9.373 9.373-9.373 24.568 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971V296h243.882v46.059c0 ' +
+    '21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.568 0-33.941l-86.059-86.059c-15.119-15.12-40.971-4.412-40.971 16.97z';
 //# sourceMappingURL=svg-path.js.map

package.json

 {
-  "name": "@kieler/klighd-interactive",
-  "version": "0.5.0-next.265acc6",
-  "description": "A module for klighd-core to interactively apply constraints to the diagram",
-  "author": "Kiel University <[e-mail]>",
-  "license": "EPL-2.0",
-  "keywords": [
-    "klighd",
-    "interactive"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/kieler/klighd-vscode",
-    "directory": "packages/klighd-core"
-  },
-  "scripts": {
-    "clean": "rm -rf lib",
-    "lint": "eslint .",
-    "build": "tsc",
-    "watch": "tsc -w",
-    "publish:next": "yarn publish --new-version \"$(semver $npm_package_version -i minor)-next.$(git rev-parse --short HEAD)\" --tag next --no-git-tag-version"
-  },
-  "dependencies": {
-    "sprotty": "0.11.1"
-  },
-  "devDependencies": {
-    "semver": "^7.3.5"
-  },
-  "files": [
-    "lib",
-    "src",
-    "build"
-  ]
+    "name": "@kieler/klighd-interactive",
+    "version": "0.5.0-next.2b5de15",
+    "description": "A module for klighd-core to interactively apply constraints to the diagram",
+    "author": "KIELER <[e-mail]>",
+    "license": "EPL-2.0",
+    "keywords": [
+        "klighd",
+        "interactive"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/kieler/klighd-vscode",
+        "directory": "packages/klighd-core"
+    },
+    "scripts": {
+        "clean": "rimraf lib",
+        "lint": "eslint .",
+        "build": "tsc",
+        "watch": "tsc -w",
+        "publish:next": "yarn publish --new-version \"$(semver $npm_package_version -i minor)-next.$(git rev-parse --short HEAD)\" --tag next --no-git-tag-version"
+    },
+    "dependencies": {
+        "inversify": "^6.0.2",
+        "snabbdom": "^3.5.1",
+        "sprotty": "^1.1.0",
+        "sprotty-protocol": "^1.1.0"
+    },
+    "devDependencies": {
+        "rimraf": "^4.4.0",
+        "semver": "^7.5.4"
+    },
+    "files": [
+        "lib",
+        "src",
+        "build"
+    ]
 }

src/actions.ts

@@ -17,5 +17,7 @@ /*
  */
+// We follow Sprotty's way of redeclaring the interface and its create function, so disable this lint check for this file.
+/* eslint-disable no-redeclare */
 
-import { Action } from 'sprotty-protocol';
-import { DeleteConstraint } from './layered/constraint-types';
+import { Action } from 'sprotty-protocol'
+import { DeleteConstraint } from './layered/constraint-types'
 
@@ -56,2 +58,2 @@ /**
     }
-}
+}

src/constraint-classes.ts

@@ -6,3 +6,3 @@ /*
  *
- * Copyright 2019-2021 by
+ * Copyright 2019-2023 by
  * + Kiel University
@@ -19,4 +19,4 @@ *   + Department of Computer Science
 
-import { moveFeature, RectangularNode, SEdge, selectFeature, SParentElement } from 'sprotty';
-import { Point } from 'sprotty-protocol';
+import { moveFeature, RectangularNode, SEdgeImpl, selectFeature, SParentElementImpl } from 'sprotty'
+import { Point } from 'sprotty-protocol'
 
@@ -29,3 +29,3 @@ /**
  */
-export interface KGraphElement extends SParentElement {
+export interface KGraphElement extends SParentElementImpl {
     /**
@@ -54,7 +54,15 @@ * May contain a trace that points back to the server instance where this element was created.
     trace?: string
+
     data: KGraphData[]
+
     areChildAreaChildrenRendered = false
+
     areNonChildAreaChildrenRendered = false
+
     hasFeature(feature: symbol): boolean {
-        return feature === selectFeature || (feature === moveFeature && (this.parent as KNode).properties['org.eclipse.elk.interactiveLayout'] as boolean)
+        return (
+            feature === selectFeature ||
+            (feature === moveFeature &&
+                ((this.parent as KNode).properties['org.eclipse.elk.interactiveLayout'] as boolean))
+        )
     }
@@ -67,3 +75,5 @@
     shadow: boolean
+
     shadowX: number
+
     shadowY: number
@@ -77,3 +87,3 @@ }
     DOWN,
-    UP
+    UP,
 }
@@ -93,8 +103,13 @@
  */
-export class KEdge extends SEdge implements KGraphElement {
+export class KEdge extends SEdgeImpl implements KGraphElement {
     trace?: string
+
     data: KGraphData[]
+
     junctionPoints: Point[]
+
     areChildAreaChildrenRendered = false
+
     areNonChildAreaChildrenRendered = false
+
     hasFeature(feature: symbol): boolean {
@@ -105,2 +120,2 @@ return feature === selectFeature
     moved: boolean
-}
+}

src/helper-methods.ts

@@ -6,3 +6,3 @@ /*
  *
- * Copyright 2020 by
+ * Copyright 2020-2023 by
  * + Kiel University
@@ -19,4 +19,4 @@ *   + Department of Computer Science
 
-import { SNode } from "sprotty"
-import { KNode } from "./constraint-classes"
+import { SNodeImpl } from 'sprotty'
+import { KNode } from './constraint-classes'
 
@@ -27,6 +27,7 @@ /**
  */
-export function filterKNodes(graphElements: any): KNode[] { // eslint-disable-line
+export function filterKNodes(graphElements: any): KNode[] {
+    // eslint-disable-line
     const nodes: KNode[] = []
     for (const elem of graphElements) {
-        if (elem instanceof SNode) {
+        if (elem instanceof SNodeImpl) {
             nodes[nodes.length] = elem as KNode
@@ -53,5 +54,5 @@ }
 /**
-* Determines whether one of the children is selected.
-* @param root Node which children should be checked.
-*/
+ * Determines whether one of the children is selected.
+ * @param root Node which children should be checked.
+ */
 export function isChildSelected(root: KNode): boolean {
@@ -61,3 +62,3 @@ const nodes = root.children
         for (const node of nodes) {
-            if (node instanceof SNode && node.selected) {
+            if (node instanceof SNodeImpl && node.selected) {
                 return true
@@ -68,2 +69,2 @@ }
     return false
-}
+}

src/interactive-module.ts

@@ -18,5 +18,5 @@ /*
 
-import { ContainerModule } from 'inversify';
-import { TYPES, configureCommand, MoveCommand, LocationPostprocessor, MoveMouseListener } from 'sprotty';
-import { KlighdInteractiveMouseListener } from './klighd-interactive-mouselistener';
+import { ContainerModule } from 'inversify'
+import { TYPES, configureCommand, MoveCommand, LocationPostprocessor, MoveMouseListener } from 'sprotty'
+import { KlighdInteractiveMouseListener } from './klighd-interactive-mouselistener'
 
@@ -30,7 +30,7 @@ /**
     bind(MoveMouseListener).toService(KlighdInteractiveMouseListener)
-    configureCommand({ bind, isBound }, MoveCommand);
-    bind(TYPES.IVNodePostprocessor).to(LocationPostprocessor);
-    bind(TYPES.HiddenVNodePostprocessor).to(LocationPostprocessor);
-});
+    configureCommand({ bind, isBound }, MoveCommand)
+    bind(TYPES.IVNodePostprocessor).to(LocationPostprocessor)
+    bind(TYPES.HiddenVNodePostprocessor).to(LocationPostprocessor)
+})
 
-export default interactiveModule;
+export default interactiveModule

src/klighd-interactive-mouselistener.ts

@@ -6,3 +6,3 @@ /*
  *
- * Copyright 2019-2021 by
+ * Copyright 2019-2023 by
  * + Kiel University
@@ -19,20 +19,20 @@ *   + Department of Computer Science
 
-import { injectable } from 'inversify';
-import { MoveMouseListener, SEdge, SLabel, SModelElement, SNode } from 'sprotty';
-import { Action } from "sprotty-protocol"
-import { RefreshDiagramAction } from './actions';
-import { KNode } from './constraint-classes';
-import { filterKNodes } from './helper-methods';
-import { DeleteStaticConstraintAction } from './layered/actions';
-import { getLayers, setProperty } from './layered/constraint-utils';
-import { RectPackDeletePositionConstraintAction } from './rect-packing/actions';
-import { setGenerateRectPackAction } from './rect-packing/constraint-util';
+import { injectable } from 'inversify'
+import { MoveMouseListener, SEdgeImpl, SLabelImpl, SModelElementImpl, SNodeImpl } from 'sprotty'
+import { Action, isAction } from 'sprotty-protocol'
+import { RefreshDiagramAction } from './actions'
+import { KNode } from './constraint-classes'
+import { filterKNodes } from './helper-methods'
+import { DeleteStaticConstraintAction } from './layered/actions'
+import { getLayers, setProperty } from './layered/constraint-utils'
+import { RectPackDeletePositionConstraintAction } from './rect-packing/actions'
+import { setGenerateRectPackAction } from './rect-packing/constraint-util'
+/* global MouseEvent */
 
 @injectable()
 export class KlighdInteractiveMouseListener extends MoveMouseListener {
-
     /**
      * Map to holds algorithm specific data generated on mouse down.
      */
-    private data: Map<string, any> = new Map
+    private data: Map<string, any> = new Map()
 
@@ -54,5 +54,5 @@ /**
      */
-    mouseMove(target: SModelElement, event: MouseEvent): Action[] {
+    mouseMove(target: SModelElementImpl, event: MouseEvent): Action[] {
         if (!event.altKey && this.target) {
-            if (target instanceof SLabel && target.parent instanceof SNode) {
+            if (target instanceof SLabelImpl && target.parent instanceof SNodeImpl) {
                 // nodes should be movable when the user clicks on the label
@@ -64,11 +64,10 @@ target = target.parent
                 if (this.elementId2startPos.size === 0) {
-                    this.collectStartPositions(this.target.root);
+                    this.collectStartPositions(this.target.root)
                 }
-                this.hasDragged = true;
+                this.hasDragged = true
                 const moveAction = this.getElementMoves(this.target, event, false)
-                if (moveAction)
-                    result.push(moveAction);
+                if (moveAction) result.push(moveAction)
             }
             // workaround - when a node is moved and after that an edge, hasDragged is set to true although edges are not movable
-            if (target instanceof SEdge) {
+            if (target instanceof SEdgeImpl) {
                 this.hasDragged = false
@@ -81,9 +80,9 @@ }
 
-    mouseDown(target: SModelElement, event: MouseEvent): Action[] {
+    override mouseDown(target: SModelElementImpl, event: MouseEvent): (Action | Promise<Action>)[] {
         let targetNode = target
-        if (target instanceof SLabel && target.parent instanceof SNode) {
+        if (target instanceof SLabelImpl && target.parent instanceof SNodeImpl) {
             // nodes should be movable when the user clicks on the label
             targetNode = target.parent
         }
-        if (targetNode && targetNode instanceof SNode) {
+        if (targetNode && targetNode instanceof SNodeImpl) {
             if (((targetNode as KNode).parent as KNode).properties['org.eclipse.elk.interactiveLayout']) {
@@ -94,3 +93,5 @@ this.target = targetNode as KNode
 
-                const algorithm = ((targetNode as KNode).parent as KNode).properties['org.eclipse.elk.algorithm'] as string
+                const algorithm = ((targetNode as KNode).parent as KNode).properties[
+                    'org.eclipse.elk.algorithm'
+                ] as string
                 // Set algorithm specific data
@@ -110,15 +111,20 @@ if (algorithm === undefined || algorithm.endsWith('layered')) {
                     if (algorithm === undefined || algorithm.endsWith('layered')) {
-                        return [DeleteStaticConstraintAction.create({
-                            id: this.target.id
-                        })]
-                    } else if (algorithm.endsWith('rectpacking')) {
-                        return [RectPackDeletePositionConstraintAction.create({
-                            id: this.target.id
-                        })]
+                        return [
+                            DeleteStaticConstraintAction.create({
+                                id: this.target.id,
+                            }),
+                        ]
                     }
+                    if (algorithm.endsWith('rectpacking')) {
+                        return [
+                            RectPackDeletePositionConstraintAction.create({
+                                id: this.target.id,
+                            }),
+                        ]
+                    }
                 }
-                return super.mouseDown(this.target as SModelElement, event)
+                return super.mouseDown(this.target as SModelElementImpl, event)
             }
         }
-        return super.mouseDown(target as SModelElement, event)
+        return super.mouseDown(target as SModelElementImpl, event)
     }
@@ -132,6 +138,6 @@
     mouseEnter(): Action[] {
-        return [];
+        return []
     }
 
-    mouseUp(target: SModelElement, event: MouseEvent): Action[] {
+    mouseUp(target: SModelElementImpl, event: MouseEvent): (Action | Promise<Action>)[] {
         if (this.hasDragged && this.target) {
@@ -143,6 +149,10 @@ // if a node is moved set properties
             if (algorithm === undefined || algorithm.endsWith('layered')) {
-                result = [setProperty(this.nodes, this.data.get('layered'), this.target)].concat(super.mouseUp(this.target, event));
+                result = (
+                    [setProperty(this.nodes, this.data.get('layered'), this.target)] as (Action | Promise<Action>)[]
+                ).concat(super.mouseUp(this.target, event))
             } else if (algorithm.endsWith('rectpacking')) {
-                const parent = this.nodes[0] ? this.nodes[0].parent as KNode : undefined
-                result = [setGenerateRectPackAction(this.nodes, this.target, parent, event)].concat(super.mouseUp(this.target, event));
+                const parent = this.nodes[0] ? (this.nodes[0].parent as KNode) : undefined
+                result = (
+                    [setGenerateRectPackAction(this.nodes, this.target, parent, event)] as (Action | Promise<Action>)[]
+                ).concat(super.mouseUp(this.target, event))
             } else {
@@ -154,10 +164,10 @@ // Algorithm not supported
             // Refresh the diagram according to the moved elements.
-            if (result.some(action => action.kind === RefreshDiagramAction.KIND)) {
+            if (result.some((action) => isAction(action) && action.kind === RefreshDiagramAction.KIND)) {
                 return result
-            } else {
-                return result.concat([RefreshDiagramAction.create()])
             }
-        } else if (this.target) {
+            return result.concat([RefreshDiagramAction.create()])
+        }
+        if (this.target) {
             this.target.selected = false
-            const result = super.mouseUp(this.target, event);
+            const result = super.mouseUp(this.target, event)
             this.target = undefined
@@ -168,2 +178,2 @@ return result
     }
-}
+}

src/layered/actions.ts

@@ -17,5 +17,7 @@ /*
  */
+// We follow Sprotty's way of redeclaring the interface and its create function, so disable this lint check for this file.
+/* eslint-disable no-redeclare */
 
-import { Action } from 'sprotty-protocol';
-import { DeleteConstraint, LayerConstraint, PositionConstraint, StaticConstraint } from './constraint-types';
+import { Action } from 'sprotty-protocol'
+import { DeleteConstraint, LayerConstraint, PositionConstraint, StaticConstraint } from './constraint-types'
 
@@ -136,2 +138,2 @@ /**
     }
-}
+}

src/layered/constraint-types.ts

@@ -18,3 +18,3 @@ /*
 
-import { Direction } from "../constraint-classes"
+import { Direction } from '../constraint-classes'
 
@@ -26,4 +26,7 @@ /**
     begin: number
+
     end: number
+
     mid: number
+
     /**
@@ -38,2 +41,3 @@ * Where up is, is determined by the direction
     bottomBorder: number
+
     /**
@@ -50,3 +54,2 @@ * 0: UNDEFINED, 1: RIGHT, 2: LEFT, 3: DOWN, 4: UP
     }
-
 }
@@ -66,3 +69,5 @@
     id: string
+
     layer: number
+
     layerCons: number
@@ -76,3 +81,5 @@ }
     id: string
+
     position: number
+
     posCons: number
@@ -86,6 +93,10 @@ }
     id: string
+
     layer: number
+
     position: number
+
     posCons: number
+
     layerCons: number
-}
+}

src/layered/constraint-utils.ts

@@ -18,8 +18,8 @@ /*
 
-import { SModelElement } from 'sprotty';
-import { Action } from 'sprotty-protocol';
-import { RefreshDiagramAction } from '../actions';
-import { Direction, KEdge, KNode } from '../constraint-classes';
-import { SetLayerConstraintAction, SetPositionConstraintAction, SetStaticConstraintAction } from './actions';
-import { Layer } from './constraint-types';
+import { SModelElementImpl } from 'sprotty'
+import { Action } from 'sprotty-protocol'
+import { RefreshDiagramAction } from '../actions'
+import { Direction, KEdge, KNode } from '../constraint-classes'
+import { SetLayerConstraintAction, SetPositionConstraintAction, SetStaticConstraintAction } from './actions'
+import { Layer } from './constraint-types'
 
@@ -29,7 +29,7 @@ /**
  */
-export const PLACEMENT_TOP_BOTTOM_OFFSET = 20;
+export const PLACEMENT_TOP_BOTTOM_OFFSET = 20
 /**
  * Layer padding for one layer case.
  */
-export const ONE_LAYER_PADDING = 10;
+export const ONE_LAYER_PADDING = 10
 
@@ -43,4 +43,6 @@ /**
 export function getLayerOfNode(node: KNode, nodes: KNode[], layers: Layer[], direction: Direction): number {
-    const coordinateInLayoutDirection = (direction === Direction.UNDEFINED || direction === Direction.RIGHT || direction === Direction.LEFT)
-        ? node.position.x + node.size.width / 2 : node.position.y + node.size.height / 2
+    const coordinateInLayoutDirection =
+        direction === Direction.UNDEFINED || direction === Direction.RIGHT || direction === Direction.LEFT
+            ? node.position.x + node.size.width / 2
+            : node.position.y + node.size.height / 2
 
@@ -50,5 +52,7 @@ // check for all layers if the node is in the layer
         const layer = layers[i]
-        if (coordinateInLayoutDirection < layer.end &&
-            (direction === Direction.UNDEFINED || direction === Direction.RIGHT || direction === Direction.DOWN) ||
-            coordinateInLayoutDirection > layer.end && (direction === Direction.LEFT || direction === Direction.UP)) {
+        if (
+            (coordinateInLayoutDirection < layer.end &&
+                (direction === Direction.UNDEFINED || direction === Direction.RIGHT || direction === Direction.DOWN)) ||
+            (coordinateInLayoutDirection > layer.end && (direction === Direction.LEFT || direction === Direction.UP))
+        ) {
             return i
@@ -76,6 +80,9 @@ }
 export function getActualLayer(node: KNode, nodes: KNode[], layerCandidate: number): number {
-
     // Examine all nodes that have a layer Id left or equal to the layerCandidate and that have a layerCons > their layerId
-    const layerConstraintLeftOfCandidate = nodes.filter(n => n.properties['org.eclipse.elk.layered.layering.layerId'] as number <= layerCandidate
-        && (n.properties['org.eclipse.elk.layered.layering.layerChoiceConstraint'] as number) > (n.properties['org.eclipse.elk.layered.layering.layerId'] as number))
+    const layerConstraintLeftOfCandidate = nodes.filter(
+        (n) =>
+            (n.properties['org.eclipse.elk.layered.layering.layerId'] as number) <= layerCandidate &&
+            (n.properties['org.eclipse.elk.layered.layering.layerChoiceConstraint'] as number) >
+                (n.properties['org.eclipse.elk.layered.layering.layerId'] as number)
+    )
 
@@ -101,3 +108,4 @@ // In case that there are no such nodes return the layerCandidate
     if (nodeWithMaxCons !== null) {
-        const idDiff = layerCandidate - (nodeWithMaxCons.properties['org.eclipse.elk.layered.layering.layerId'] as number)
+        const idDiff =
+            layerCandidate - (nodeWithMaxCons.properties['org.eclipse.elk.layered.layering.layerId'] as number)
         return maxCons + idDiff
@@ -122,5 +130,10 @@ }
         const upperNeighbor = layerNodes[upperIndex]
-        const posConsOfUpper = upperNeighbor.properties['org.eclipse.elk.layered.crossingMinimization.positionChoiceConstraint'] as number
+        const posConsOfUpper = upperNeighbor.properties[
+            'org.eclipse.elk.layered.crossingMinimization.positionChoiceConstraint'
+        ] as number
         if (posConsOfUpper > upperIndex) {
-            if (alreadyInLayer && upperNeighbor.properties['org.eclipse.elk.layered.crossingMinimization.positionId'] === localTargetIndex) {
+            if (
+                alreadyInLayer &&
+                upperNeighbor.properties['org.eclipse.elk.layered.crossingMinimization.positionId'] === localTargetIndex
+            ) {
                 localTargetIndex = posConsOfUpper
@@ -141,9 +154,19 @@ } else {
     // All nodes within one hierarchy level have the same direction
-    nodes.sort((a, b) => (a.properties['org.eclipse.elk.layered.layering.layerId'] as number) - (b.properties['org.eclipse.elk.layered.layering.layerId'] as number))
+    nodes.sort(
+        (a, b) =>
+            (a.properties['org.eclipse.elk.layered.layering.layerId'] as number) -
+            (b.properties['org.eclipse.elk.layered.layering.layerId'] as number)
+    )
     const layers = []
     let layer = 0
     // Begin coordinate of layer, depending of on the layout direction this might be a x or y coordinate
-    let beginCoordinate = (direction === Direction.UNDEFINED || direction === Direction.RIGHT || direction === Direction.DOWN) ? Number.MAX_VALUE : Number.MIN_VALUE
+    let beginCoordinate =
+        direction === Direction.UNDEFINED || direction === Direction.RIGHT || direction === Direction.DOWN
+            ? Number.MAX_VALUE
+            : Number.MIN_VALUE
     // End coordinate of layer, depending of on the layout direction this might be a x or y coordinate
-    let endCoordinate = (direction === Direction.UNDEFINED || direction === Direction.RIGHT || direction === Direction.DOWN) ? Number.MIN_VALUE : Number.MAX_VALUE
+    let endCoordinate =
+        direction === Direction.UNDEFINED || direction === Direction.RIGHT || direction === Direction.DOWN
+            ? Number.MIN_VALUE
+            : Number.MAX_VALUE
     let topBorder = Number.MAX_VALUE // naming fits to the RIGHT direction (1)
@@ -156,5 +179,16 @@ let bottomBorder = Number.MIN_VALUE
             // node is in the next layer
-            layers[layer] = new Layer(beginCoordinate, endCoordinate, beginCoordinate + (endCoordinate - beginCoordinate) / 2, direction)
-            beginCoordinate = (direction === Direction.UNDEFINED || direction === Direction.RIGHT || direction === Direction.DOWN) ? Number.MAX_VALUE : Number.MIN_VALUE
-            endCoordinate = (direction === Direction.UNDEFINED || direction === Direction.RIGHT || direction === Direction.DOWN) ? Number.MIN_VALUE : Number.MAX_VALUE
+            layers[layer] = new Layer(
+                beginCoordinate,
+                endCoordinate,
+                beginCoordinate + (endCoordinate - beginCoordinate) / 2,
+                direction
+            )
+            beginCoordinate =
+                direction === Direction.UNDEFINED || direction === Direction.RIGHT || direction === Direction.DOWN
+                    ? Number.MAX_VALUE
+                    : Number.MIN_VALUE
+            endCoordinate =
+                direction === Direction.UNDEFINED || direction === Direction.RIGHT || direction === Direction.DOWN
+                    ? Number.MIN_VALUE
+                    : Number.MAX_VALUE
             layer++
@@ -169,3 +203,4 @@ }
         switch (direction) {
-            case Direction.UNDEFINED: case Direction.RIGHT: {
+            case Direction.UNDEFINED:
+            case Direction.RIGHT: {
                 currentBegin = node.shadow ? node.shadowX : node.position.x
@@ -175,3 +210,3 @@ currentEnd = currentBegin + node.size.width
                 currentBottomBorder = currentTopBorder + node.size.height
-                break;
+                break
             }
@@ -183,3 +218,3 @@ case Direction.LEFT: {
                 currentBottomBorder = currentTopBorder + node.size.height
-                break;
+                break
             }
@@ -191,3 +226,3 @@ case Direction.DOWN: {
                 currentBottomBorder = currentTopBorder + node.size.width
-                break;
+                break
             }
@@ -199,11 +234,18 @@ case Direction.UP: {
                 currentBottomBorder = currentTopBorder + node.size.width
-                break;
+                break
             }
+            default: {
+                console.error('error in constraint-utils.ts, unexpected direction in switch')
+            }
         }
 
         // update coordinates of the current layer
-        beginCoordinate = (direction === Direction.UNDEFINED || direction === Direction.RIGHT || direction === Direction.DOWN) ?
-            Math.min(currentBegin, beginCoordinate) : Math.max(currentBegin, beginCoordinate)
-        endCoordinate = (direction === Direction.UNDEFINED || direction === Direction.RIGHT || direction === Direction.DOWN) ?
-            Math.max(currentEnd, endCoordinate) : Math.min(currentEnd, endCoordinate)
+        beginCoordinate =
+            direction === Direction.UNDEFINED || direction === Direction.RIGHT || direction === Direction.DOWN
+                ? Math.min(currentBegin, beginCoordinate)
+                : Math.max(currentBegin, beginCoordinate)
+        endCoordinate =
+            direction === Direction.UNDEFINED || direction === Direction.RIGHT || direction === Direction.DOWN
+                ? Math.max(currentEnd, endCoordinate)
+                : Math.min(currentEnd, endCoordinate)
         topBorder = Math.min(currentTopBorder, topBorder)
@@ -213,6 +255,11 @@ bottomBorder = Math.max(currentBottomBorder, bottomBorder)
     // add last layer
-    layers[layer] = new Layer(beginCoordinate, endCoordinate, beginCoordinate + ((endCoordinate - beginCoordinate) / 2), direction)
+    layers[layer] = new Layer(
+        beginCoordinate,
+        endCoordinate,
+        beginCoordinate + (endCoordinate - beginCoordinate) / 2,
+        direction
+    )
     // offset above & below the layers
-    topBorder = topBorder - PLACEMENT_TOP_BOTTOM_OFFSET
-    bottomBorder = bottomBorder + PLACEMENT_TOP_BOTTOM_OFFSET
+    topBorder -= PLACEMENT_TOP_BOTTOM_OFFSET
+    bottomBorder += PLACEMENT_TOP_BOTTOM_OFFSET
     // update left and right bounds of the layers and set y bounds
@@ -237,30 +284,34 @@ for (let i = 0; i < layers.length - 1; i++) {
         switch (direction) {
-            case Direction.UNDEFINED: case Direction.RIGHT: {
-                firstLayer.begin = firstLayer.begin - ONE_LAYER_PADDING
-                firstLayer.end = firstLayer.end + ONE_LAYER_PADDING
+            case Direction.UNDEFINED:
+            case Direction.RIGHT: {
+                firstLayer.begin -= ONE_LAYER_PADDING
+                firstLayer.end += ONE_LAYER_PADDING
                 firstLayer.topBorder = topBorder
                 firstLayer.bottomBorder = bottomBorder
-                break;
+                break
             }
             case Direction.LEFT: {
-                firstLayer.begin = firstLayer.begin + ONE_LAYER_PADDING
-                firstLayer.end = firstLayer.end - ONE_LAYER_PADDING
+                firstLayer.begin += ONE_LAYER_PADDING
+                firstLayer.end -= ONE_LAYER_PADDING
                 firstLayer.topBorder = topBorder
                 firstLayer.bottomBorder = bottomBorder
-                break;
+                break
             }
             case Direction.DOWN: {
-                firstLayer.begin = firstLayer.begin - ONE_LAYER_PADDING
-                firstLayer.end = firstLayer.end + ONE_LAYER_PADDING
+                firstLayer.begin -= ONE_LAYER_PADDING
+                firstLayer.end += ONE_LAYER_PADDING
                 firstLayer.topBorder = topBorder
                 firstLayer.bottomBorder = bottomBorder
-                break;
+                break
             }
             case Direction.UP: {
-                firstLayer.begin = firstLayer.begin + ONE_LAYER_PADDING
-                firstLayer.end = firstLayer.end - ONE_LAYER_PADDING
+                firstLayer.begin += ONE_LAYER_PADDING
+                firstLayer.end -= ONE_LAYER_PADDING
                 firstLayer.topBorder = topBorder
                 firstLayer.bottomBorder = bottomBorder
-                break;
+                break
             }
+            default: {
+                console.error('error in constraint-utils.ts, unexpected direction in switch')
+            }
         }
@@ -344,6 +395,8 @@ } else {
     // check the connected nodes for layer constraints
-    for (const node of connectedNodes) {
-        if (node.properties['org.eclipse.elk.layered.layering.layerId'] === layer
-            && node.properties['org.eclipse.elk.layered.layering.layerChoiceConstraint'] !== -1
-            && node.properties['org.eclipse.elk.layered.layering.layerChoiceConstraint'] !== undefined) {
+    for (const connectedNode of connectedNodes) {
+        if (
+            connectedNode.properties['org.eclipse.elk.layered.layering.layerId'] === layer &&
+            connectedNode.properties['org.eclipse.elk.layered.layering.layerChoiceConstraint'] !== -1 &&
+            connectedNode.properties['org.eclipse.elk.layered.layering.layerChoiceConstraint'] !== undefined
+        ) {
             // layer is forbidden for the given node
@@ -364,4 +417,6 @@ return true
 export function shouldOnlyLCBeSet(node: KNode, layers: Layer[], direction: Direction): boolean {
-    const coordinateToCheck = (direction === Direction.UNDEFINED || direction === Direction.RIGHT || direction === Direction.LEFT) ?
-        node.position.y : node.position.x
+    const coordinateToCheck =
+        direction === Direction.UNDEFINED || direction === Direction.RIGHT || direction === Direction.LEFT
+            ? node.position.y
+            : node.position.x
     if (layers.length !== 0) {
@@ -379,5 +434,5 @@ const layerTop = layers[0].topBorder
  */
-export function setProperty(nodes: KNode[], layers: Layer[], target: SModelElement): Action {
+export function setProperty(nodes: KNode[], layers: Layer[], target: SModelElementImpl): Action {
     const targetNode: KNode = target as KNode
-    const direction = targetNode.direction
+    const { direction } = targetNode
     // calculate layer and position the target has in the graph at the new position
@@ -387,3 +442,7 @@ const layerOfTarget = getLayerOfNode(targetNode, nodes, layers, direction)
     const positionOfTarget = getPositionInLayer(nodesOfLayer, targetNode)
-    const newPositionCons = getActualTargetIndex(positionOfTarget, nodesOfLayer.indexOf(targetNode) !== -1, nodesOfLayer)
+    const newPositionCons = getActualTargetIndex(
+        positionOfTarget,
+        nodesOfLayer.indexOf(targetNode) !== -1,
+        nodesOfLayer
+    )
     const newLayerCons = getActualLayer(targetNode, nodes, layerOfTarget)
@@ -395,3 +454,4 @@ const forbidden = isLayerForbidden(targetNode, newLayerCons)
         return RefreshDiagramAction.create()
-    } else if (targetNode.properties['org.eclipse.elk.layered.layering.layerId'] !== layerOfTarget) {
+    }
+    if (targetNode.properties['org.eclipse.elk.layered.layering.layerId'] !== layerOfTarget) {
         // layer constraint should only be set if the layer index changed
@@ -403,28 +463,25 @@ if (shouldOnlyLCBeSet(targetNode, layers, direction)) {
                 layer: layerOfTarget,
-                layerCons: newLayerCons
-            })
-        } else {
-            // If layer and position constraint should be set - send them both in one StaticConstraint
-            return SetStaticConstraintAction.create({
-                id: targetNode.id,
-                layer: layerOfTarget,
                 layerCons: newLayerCons,
-                position: positionOfTarget,
-                posCons: newPositionCons
             })
         }
-    } else {
-
-        // position constraint should only be set if the position of the node changed
-        if (targetNode.properties['org.eclipse.elk.layered.crossingMinimization.positionId'] !== positionOfTarget) {
-            // set the position Constraint
-            return SetPositionConstraintAction.create({
-                id: targetNode.id,
-                position: positionOfTarget,
-                posCons: newPositionCons
-            })
-        }
+        // If layer and position constraint should be set - send them both in one StaticConstraint
+        return SetStaticConstraintAction.create({
+            id: targetNode.id,
+            layer: layerOfTarget,
+            layerCons: newLayerCons,
+            position: positionOfTarget,
+            posCons: newPositionCons,
+        })
     }
+    // position constraint should only be set if the position of the node changed
+    if (targetNode.properties['org.eclipse.elk.layered.crossingMinimization.positionId'] !== positionOfTarget) {
+        // set the position Constraint
+        return SetPositionConstraintAction.create({
+            id: targetNode.id,
+            position: positionOfTarget,
+            posCons: newPositionCons,
+        })
+    }
     // If the node was moved without setting a constraint - let it snap back
     return RefreshDiagramAction.create()
-}
+}

src/rect-packing/actions.ts

@@ -17,5 +17,7 @@ /*
  */
+// We follow Sprotty's way of redeclaring the interface and its create function, so disable this lint check for this file.
+/* eslint-disable no-redeclare */
 
-import { Action } from 'sprotty-protocol';
-import { AspectRatio, RectPackDeletePositionConstraint, RectPackSetPositionConstraint } from './constraint-types';
+import { Action } from 'sprotty-protocol'
+import { AspectRatio, RectPackDeletePositionConstraint, RectPackSetPositionConstraint } from './constraint-types'
 
@@ -77,2 +79,2 @@ /**
     }
-}
+}

src/rect-packing/constraint-types.ts

@@ -18,7 +18,8 @@ /*
 
- /**
-  * An aspect ratio constraint data class.
-  */
+/**
+ * An aspect ratio constraint data class.
+ */
 export class AspectRatio {
     id: string
+
     aspectRatio: number
@@ -39,3 +40,4 @@ }
     id: string
+
     order: number
 }

src/rect-packing/constraint-util.ts

@@ -18,7 +18,8 @@ /*
 
-import { getAbsoluteBounds } from 'sprotty';
-import { Action, Bounds } from 'sprotty-protocol';
-import { RectPackSetPositionConstraintAction, SetAspectRatioAction } from './actions';
-import { RefreshDiagramAction } from '../actions';
-import { KNode } from '../constraint-classes';
+import { getAbsoluteBounds } from 'sprotty'
+import { Action, Bounds } from 'sprotty-protocol'
+import { RectPackSetPositionConstraintAction, SetAspectRatioAction } from './actions'
+import { RefreshDiagramAction } from '../actions'
+import { KNode } from '../constraint-classes'
+/* global MouseEvent */
 
@@ -32,11 +33,16 @@ /**
  */
-export function setGenerateRectPackAction(nodes: KNode[], target: KNode, parent: KNode | undefined, event: MouseEvent): Action {
+export function setGenerateRectPackAction(
+    nodes: KNode[],
+    target: KNode,
+    parent: KNode | undefined,
+    event: MouseEvent
+): Action {
     // If node is not put to a valid position the diagram will be refreshed.
     let result: Action = RefreshDiagramAction.create()
     // If the node is moved on top of another node it takes its place.
-    nodes.forEach(node => {
+    nodes.forEach((node) => {
         if (node.id !== target.id) {
             const targetBounds = getAbsoluteBounds(node)
-            const canvasBounds = target.root.canvasBounds;
-            const boundsInWindow = Bounds.translate(targetBounds, canvasBounds);
+            const { canvasBounds } = target.root
+            const boundsInWindow = Bounds.translate(targetBounds, canvasBounds)
             const lowX = boundsInWindow.x
@@ -46,4 +52,3 @@ const lowY = boundsInWindow.y
             const highY = boundsInWindow.y + boundsInWindow.height
-            if (event.pageX > lowX && event.pageX < highX
-                && event.pageY > lowY && event.pageY < highY) {
+            if (event.pageX > lowX && event.pageX < highX && event.pageY > lowY && event.pageY < highY) {
                 let actualPosition = node.properties['org.eclipse.elk.rectPacking.currentPosition'] as number
@@ -55,7 +60,10 @@ if (node.properties['org.eclipse.elk.alg.rectpacking.desiredPosition'] !== -1) {
                 if (node.properties['org.eclipse.elk.alg.rectpacking.desiredPosition'] !== -1) {
-                    actualTargetPosition = target.properties['org.eclipse.elk.alg.rectpacking.desiredPosition'] as number
+                    actualTargetPosition = target.properties[
+                        'org.eclipse.elk.alg.rectpacking.desiredPosition'
+                    ] as number
                 }
                 if (actualPosition !== actualTargetPosition && actualPosition !== -1) {
                     result = RectPackSetPositionConstraintAction.create({
-                        id: target.id, order: actualPosition
+                        id: target.id,
+                        order: actualPosition,
                     })
@@ -65,3 +73,3 @@ }
         }
-    });
+    })
     if (result.kind === RefreshDiagramAction.KIND) {
@@ -75,3 +83,3 @@ // Case node should not be swapped.
         let maxY: number = Number.MIN_VALUE
-        nodes.forEach(node => {
+        nodes.forEach((node) => {
             if (node.position.x < x) {
@@ -96,3 +104,3 @@ x = node.position.x
                 id: parent.id,
-                aspectRatio: aspectRatio
+                aspectRatio,
             })
@@ -102,2 +110,2 @@ }
     return result
-}
+}

src/svg-path.ts

@@ -23,5 +23,6 @@ /*
  */
-export const lockPath = "M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 " +
-    "152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 " +
-    "0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"
+export const lockPath =
+    'M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 ' +
+    '152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 ' +
+    '0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z'
 
@@ -33,5 +34,6 @@ /**
  */
-export const arrowVertical = "M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 " +
-    "7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 " +
-    "0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"
+export const arrowVertical =
+    'M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 ' +
+    '7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 ' +
+    '0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z'
 
@@ -43,4 +45,5 @@ /**
  */
-export const arrowHorizontal = "M377.941 169.941V216H134.059v-46.059c0-21.382-25.851-32.09-40.971-16.971L7.029 " +
-    "239.029c-9.373 9.373-9.373 24.568 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971V296h243.882v46.059c0 " +
-    "21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.568 0-33.941l-86.059-86.059c-15.119-15.12-40.971-4.412-40.971 16.97z"
+export const arrowHorizontal =
+    'M377.941 169.941V216H134.059v-46.059c0-21.382-25.851-32.09-40.971-16.971L7.029 ' +
+    '239.029c-9.373 9.373-9.373 24.568 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971V296h243.882v46.059c0 ' +
+    '21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.568 0-33.941l-86.059-86.059c-15.119-15.12-40.971-4.412-40.971 16.97z'

New alerts

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 6 instances in 1 package

Fixed alerts

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 4 instances in 1 package

Improved metrics

Total package byte prevSize

230658

increased by1.26%

Lines of code

4166

increased by6.25%

Worsened metrics

Dependency count

4

increased by300%

Dev dependency count

2

increased by100%

Number of low license alerts

11

increased by22.22%

Dependency changes

• + Addedinversify@^6.0.2

• + Addedsnabbdom@^3.5.1

• + Addedsprotty-protocol@^1.1.0

• + Added@inversifyjs/common@1.4.0(transitive)

• + Added@inversifyjs/core@1.3.5(transitive)

• + Added@inversifyjs/reflect-metadata-utils@0.2.4(transitive)

• + Addedautocompleter@9.3.2(transitive)

• + Addedinversify@6.2.2(transitive)

• + Addedreflect-metadata@0.2.2(transitive)

• + Addedsnabbdom@3.5.1(transitive)

• + Addedsprotty@1.4.0(transitive)

• + Addedsprotty-protocol@1.4.0(transitive)

• - Removed@vscode/codicons@0.0.25(transitive)

• - Removedautocompleter@5.2.0(transitive)

• - Removedinversify@5.1.1(transitive)

• - Removedsprotty@0.11.1(transitive)

• - Removedsprotty-protocol@0.11.0(transitive)

• Updatedsprotty@^1.1.0