sprotty - npm Package Compare versions

Comparing version 0.5.0-next.cf6ff2f to 0.5.0-next.d035414

lib/base/actions/action-dispatcher.d.ts

@@ -47,2 +47,3 @@ /********************************************************************************
 }
+export declare type IActionDispatcherProvider = () => Promise<IActionDispatcher>;
 //# sourceMappingURL=action-dispatcher.d.ts.map

lib/base/di.config.js

@@ -38,2 +38,4 @@ "use strict";
 var command_1 = require("./commands/command");
+var css_class_decorator_1 = require("./views/css-class-decorator");
+var tool_manager_1 = require("./tool-manager/tool-manager");
 var defaultContainerModule = new inversify_1.ContainerModule(function (bind) {
@@ -99,27 +101,16 @@ // Logging ---------------------------------------------
     bind(id_decorator_1.IdDecorator).toSelf().inSingletonScope();
-    bind(types_1.TYPES.IVNodeDecorator).toDynamicValue(function (context) {
-        return context.container.get(id_decorator_1.IdDecorator);
-    }).inSingletonScope();
+    bind(types_1.TYPES.IVNodeDecorator).toService(id_decorator_1.IdDecorator);
+    bind(types_1.TYPES.HiddenVNodeDecorator).toService(id_decorator_1.IdDecorator);
+    bind(css_class_decorator_1.CssClassDecorator).toSelf().inSingletonScope();
+    bind(types_1.TYPES.IVNodeDecorator).toService(css_class_decorator_1.CssClassDecorator);
+    bind(types_1.TYPES.HiddenVNodeDecorator).toService(css_class_decorator_1.CssClassDecorator);
     bind(mouse_tool_1.MouseTool).toSelf().inSingletonScope();
-    bind(types_1.TYPES.IVNodeDecorator).toDynamicValue(function (context) {
-        return context.container.get(mouse_tool_1.MouseTool);
-    }).inSingletonScope();
+    bind(types_1.TYPES.IVNodeDecorator).toService(mouse_tool_1.MouseTool);
     bind(key_tool_1.KeyTool).toSelf().inSingletonScope();
-    bind(types_1.TYPES.IVNodeDecorator).toDynamicValue(function (context) {
-        return context.container.get(key_tool_1.KeyTool);
-    }).inSingletonScope();
+    bind(types_1.TYPES.IVNodeDecorator).toService(key_tool_1.KeyTool);
     bind(vnode_decorators_1.FocusFixDecorator).toSelf().inSingletonScope();
-    bind(types_1.TYPES.IVNodeDecorator).toDynamicValue(function (context) {
-        return context.container.get(vnode_decorators_1.FocusFixDecorator);
-    }).inSingletonScope();
-    bind(types_1.TYPES.PopupVNodeDecorator).toDynamicValue(function (context) {
-        return context.container.get(id_decorator_1.IdDecorator);
-    }).inSingletonScope();
+    bind(types_1.TYPES.IVNodeDecorator).toService(vnode_decorators_1.FocusFixDecorator);
+    bind(types_1.TYPES.PopupVNodeDecorator).toService(id_decorator_1.IdDecorator);
     bind(mouse_tool_1.PopupMouseTool).toSelf().inSingletonScope();
-    bind(types_1.TYPES.PopupVNodeDecorator).toDynamicValue(function (context) {
-        return context.container.get(mouse_tool_1.PopupMouseTool);
-    }).inSingletonScope();
-    bind(types_1.TYPES.HiddenVNodeDecorator).toDynamicValue(function (context) {
-        return context.container.get(id_decorator_1.IdDecorator);
-    }).inSingletonScope();
+    bind(types_1.TYPES.PopupVNodeDecorator).toService(mouse_tool_1.PopupMouseTool);
     // Animation Frame Sync ------------------------------------------
@@ -130,8 +121,10 @@ bind(types_1.TYPES.AnimationFrameSyncer).to(animation_frame_syncer_1.AnimationFrameSyncer).inSingletonScope();
     bind(initialize_canvas_1.CanvasBoundsInitializer).toSelf().inSingletonScope();
-    bind(types_1.TYPES.IVNodeDecorator).toDynamicValue(function (context) {
-        return context.container.get(initialize_canvas_1.CanvasBoundsInitializer);
-    }).inSingletonScope();
+    bind(types_1.TYPES.IVNodeDecorator).toService(initialize_canvas_1.CanvasBoundsInitializer);
     bind(types_1.TYPES.SModelStorage).to(smodel_storage_1.SModelStorage).inSingletonScope();
+    // Tool manager initialization ------------------------------------
+    bind(types_1.TYPES.IToolManager).to(tool_manager_1.ToolManager).inSingletonScope();
+    bind(types_1.TYPES.KeyListener).to(tool_manager_1.DefaultToolsEnablingKeyListener);
+    bind(types_1.TYPES.IActionHandlerInitializer).to(tool_manager_1.ToolManagerActionHandlerInitializer);
 });
 exports.default = defaultContainerModule;
 //# sourceMappingURL=di.config.js.map

lib/base/model/smodel.d.ts

@@ -27,2 +27,3 @@ /********************************************************************************
     children?: SModelElementSchema[];
+    cssClasses?: string[];
 }
@@ -43,2 +44,3 @@ /**
     id: string;
+    cssClasses?: string[];
     readonly root: SModelRoot;
@@ -45,0 +47,0 @@ readonly index: SModelIndex<SModelElement>;

lib/base/types.d.ts

@@ -59,3 +59,4 @@ /********************************************************************************
     IVNodeDecorator: symbol;
+    IToolManager: symbol;
 };
 //# sourceMappingURL=types.d.ts.map

lib/base/types.js

@@ -60,4 +60,5 @@ "use strict";
     ViewRegistry: Symbol('ViewRegistry'),
-    IVNodeDecorator: Symbol('IVNodeDecorator')
+    IVNodeDecorator: Symbol('IVNodeDecorator'),
+    IToolManager: Symbol('IToolManager')
 };
 //# sourceMappingURL=types.js.map

lib/base/views/key-tool.d.ts

@@ -29,2 +29,3 @@ /********************************************************************************
     keyDown(element: SModelRoot, event: KeyboardEvent): void;
+    keyUp(element: SModelRoot, event: KeyboardEvent): void;
     focus(): void;
@@ -36,3 +37,4 @@ decorate(vnode: VNode, element: SModelElement): VNode;
     keyDown(element: SModelElement, event: KeyboardEvent): Action[];
+    keyUp(element: SModelElement, event: KeyboardEvent): Action[];
 }
 //# sourceMappingURL=key-tool.d.ts.map

lib/base/views/key-tool.js

@@ -60,2 +60,5 @@ "use strict";
     };
+    KeyTool.prototype.keyUp = function (element, event) {
+        this.handleEvent('keyUp', element, event);
+    };
     KeyTool.prototype.focus = function () { };
@@ -66,2 +69,3 @@ KeyTool.prototype.decorate = function (vnode, element) {
             vnode_utils_1.on(vnode, 'keydown', this.keyDown.bind(this), element);
+            vnode_utils_1.on(vnode, 'keyup', this.keyUp.bind(this), element);
         }
@@ -87,2 +91,5 @@ return vnode;
     };
+    KeyListener.prototype.keyUp = function (element, event) {
+        return [];
+    };
     KeyListener = __decorate([
@@ -89,0 +96,0 @@ inversify_1.injectable()

lib/features/decoration/decoration-placer.js

@@ -30,3 +30,3 @@ "use strict";
 var model_2 = require("../bounds/model");
-var model_3 = require("../edit/model");
+var model_3 = require("../routing/model");
 var DecorationPlacer = /** @class */ (function () {
@@ -33,0 +33,0 @@ function DecorationPlacer() {

lib/features/decoration/model.d.ts

@@ -28,5 +28,8 @@ /********************************************************************************
 export declare class SIssueMarker extends SDecoration {
-    messages: string[];
+    issues: SIssue[];
+}
+export declare class SIssue {
+    message: string;
     severity: SIssueSeverity;
 }
 //# sourceMappingURL=model.d.ts.map

lib/features/decoration/model.js

@@ -58,2 +58,8 @@ "use strict";
 exports.SIssueMarker = SIssueMarker;
+var SIssue = /** @class */ (function () {
+    function SIssue() {
+    }
+    return SIssue;
+}());
+exports.SIssue = SIssue;
 //# sourceMappingURL=model.js.map

lib/features/decoration/views.d.ts

@@ -21,4 +21,5 @@ /********************************************************************************
     render(marker: SIssueMarker, context: RenderingContext): VNode;
-    protected getPath(severity: SIssueSeverity): "M768 128q209 0 385.5 103t279.5 279.5 103 385.5-103 385.5-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103zm128 1247v-190q0-14-9-23.5t-22-9.5h-192q-13 0-23 10t-10 23v190q0 13 10 23t23 10h192q13 0 22-9.5t9-23.5zm-2-344l18-621q0-12-10-18-10-8-24-8h-220q-14 0-24 8-10 6-10 18l17 621q0 10 10 17.5t24 7.5h185q14 0 23.5-7.5t10.5-17.5z" | "M1024 1375v-190q0-14-9.5-23.5t-22.5-9.5h-192q-13 0-22.5 9.5t-9.5 23.5v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11h-220q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17h-1536q-34 0-63.5-17t-46.5-46q-37-63-2-126l768-1408q17-31 47-49t65-18 65 18 47 49z" | "M1024 1376v-160q0-14-9-23t-23-9h-96v-512q0-14-9-23t-23-9h-320q-14 0-23 9t-9 23v160q0 14 9 23t23 9h96v320h-96q-14 0-23 9t-9 23v160q0 14 9 23t23 9h448q14 0 23-9t9-23zm-128-896v-160q0-14-9-23t-23-9h-192q-14 0-23 9t-9 23v160q0 14 9 23t23 9h192q14 0 23-9t9-23zm640 416q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z";
+    protected getMaxSeverity(marker: SIssueMarker): SIssueSeverity;
+    protected getPath(severity: SIssueSeverity): "M768 128q209 0 385.5 103t279.5 279.5 103 385.5-103 385.5-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103zm128 1247v-190q0-14-9-23.5t-22-9.5h-192q-13 0-23 10t-10 23v190q0 13 10 23t23 10h192q13 0 22-9.5t9-23.5zm-2-344l18-621q0-12-10-18-10-8-24-8h-220q-14 0-24 8-10 6-10 18l17 621q0 10 10 17.5t24 7.5h185q14 0 23.5-7.5t10.5-17.5z" | "M1024 1376v-160q0-14-9-23t-23-9h-96v-512q0-14-9-23t-23-9h-320q-14 0-23 9t-9 23v160q0 14 9 23t23 9h96v320h-96q-14 0-23 9t-9 23v160q0 14 9 23t23 9h448q14 0 23-9t9-23zm-128-896v-160q0-14-9-23t-23-9h-192q-14 0-23 9t-9 23v160q0 14 9 23t23 9h192q14 0 23-9t9-23zm640 416q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z";
 }
 //# sourceMappingURL=views.d.ts.map

lib/features/decoration/views.js

@@ -27,16 +27,24 @@ "use strict";
         var trafo = "scale(" + scale + ", " + scale + ")";
+        var maxSeverity = this.getMaxSeverity(marker);
         var group = snabbdom_jsx_1.svg("g", { "class-sprotty-issue": true },
             snabbdom_jsx_1.svg("g", { transform: trafo },
-                snabbdom_jsx_1.svg("path", { d: this.getPath(marker.severity) })));
-        vnode_utils_1.setClass(group, 'sprotty-' + marker.severity, true);
+                snabbdom_jsx_1.svg("path", { d: this.getPath(maxSeverity) })));
+        vnode_utils_1.setClass(group, 'sprotty-' + maxSeverity, true);
         return group;
     };
+    IssueMarkerView.prototype.getMaxSeverity = function (marker) {
+        var currentSeverity = 'info';
+        for (var _i = 0, _a = marker.issues.map(function (s) { return s.severity; }); _i < _a.length; _i++) {
+            var severity = _a[_i];
+            if (severity === 'error' || (severity === 'warning' && currentSeverity === 'info'))
+                currentSeverity = severity;
+        }
+        return currentSeverity;
+    };
     IssueMarkerView.prototype.getPath = function (severity) {
         switch (severity) {
             case 'error':
+            case 'warning':
                 // tslint:disable-next-line:max-line-length
                 return "M768 128q209 0 385.5 103t279.5 279.5 103 385.5-103 385.5-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103zm128 1247v-190q0-14-9-23.5t-22-9.5h-192q-13 0-23 10t-10 23v190q0 13 10 23t23 10h192q13 0 22-9.5t9-23.5zm-2-344l18-621q0-12-10-18-10-8-24-8h-220q-14 0-24 8-10 6-10 18l17 621q0 10 10 17.5t24 7.5h185q14 0 23.5-7.5t10.5-17.5z";
-            case 'warning':
-                // tslint:disable-next-line:max-line-length
-                return "M1024 1375v-190q0-14-9.5-23.5t-22.5-9.5h-192q-13 0-22.5 9.5t-9.5 23.5v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11h-220q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17h-1536q-34 0-63.5-17t-46.5-46q-37-63-2-126l768-1408q17-31 47-49t65-18 65 18 47 49z";
             case 'info':
@@ -43,0 +51,0 @@ // tslint:disable-next-line:max-line-length

lib/features/edit/edit-routing.d.ts

@@ -17,3 +17,3 @@ /********************************************************************************
 import { Point } from "../../utils/geometry";
-import { Routable, SRoutingHandle, RoutingHandleKind } from './model';
+import { SRoutingHandle, RoutingHandleKind } from './model';
 import { Action } from "../../base/actions/action";
@@ -23,2 +23,3 @@ import { Command, CommandExecutionContext, CommandResult } from "../../base/commands/command";
 import { Animation } from '../../base/animations/animation';
+import { Routable } from "../routing/model";
 export declare function createRoutingHandle(kind: RoutingHandleKind, parentId: string, index: number): SRoutingHandle;
@@ -25,0 +26,0 @@ export declare function createRoutingHandles(editTarget: SParentElement & Routable): void;

lib/features/edit/edit-routing.js

@@ -43,2 +43,3 @@ "use strict";
 var sgraph_1 = require("../../graph/sgraph");
+var model_2 = require("../routing/model");
 function createRoutingHandle(kind, parentId, index) {
@@ -99,3 +100,3 @@ var handle = new model_1.SRoutingHandle();
                 _this.elementsToDeactivate.push(element);
-            if (element instanceof model_1.SRoutingHandle && model_1.isRoutable(element.parent)) {
+            if (element instanceof model_1.SRoutingHandle && model_2.isRoutable(element.parent)) {
                 var parent_1 = element.parent;
@@ -116,3 +117,3 @@ if (_this.shouldRemoveHandle(element, parent_1)) {
         this.elementsToDeactivate.forEach(function (element) {
-            if (model_1.isRoutable(element) && element instanceof smodel_1.SParentElement)
+            if (model_2.isRoutable(element) && element instanceof smodel_1.SParentElement)
                 element.removeAll(function (child) { return child instanceof model_1.SRoutingHandle; });
@@ -122,3 +123,3 @@ else if (element instanceof model_1.SRoutingHandle) {
                 if (element.danglingAnchor) {
-                    if (model_1.isRoutable(element.parent) && element.danglingAnchor.original) {
+                    if (model_2.isRoutable(element.parent) && element.danglingAnchor.original) {
                         if (element.parent.source === element.danglingAnchor)
@@ -155,3 +156,3 @@ element.parent.sourceId = element.danglingAnchor.original.id;
         this.elementsToActivate.forEach(function (element) {
-            if (model_1.isRoutable(element) && element instanceof smodel_1.SParentElement)
+            if (model_2.isRoutable(element) && element instanceof smodel_1.SParentElement)
                 element.removeAll(function (child) { return child instanceof model_1.SRoutingHandle; });
@@ -207,3 +208,3 @@ else if (element instanceof model_1.SRoutingHandle)
                 var parent_2 = resolvedMove.parent;
-                if (model_1.isRoutable(parent_2))
+                if (model_2.isRoutable(parent_2))
                     _this.originalRoutingPoints.set(parent_2.id, parent_2.routingPoints.slice());
@@ -222,3 +223,3 @@ }
         if (element instanceof model_1.SRoutingHandle) {
-            if (model_1.isRoutable(element.parent)) {
+            if (model_2.isRoutable(element.parent)) {
                 if (element.kind === 'source' && !(element.parent.source instanceof sgraph_1.SDanglingAnchor)) {
@@ -257,3 +258,3 @@ var anchor = new sgraph_1.SDanglingAnchor();
             var parent = res.parent;
-            if (model_1.isRoutable(parent)) {
+            if (model_2.isRoutable(parent)) {
                 if (handle.danglingAnchor) {
@@ -294,3 +295,3 @@ handle.danglingAnchor.position = res.toPosition;
                 var points = _this.originalRoutingPoints.get(parent.id);
-                if (points !== undefined && model_1.isRoutable(parent)) {
+                if (points !== undefined && model_2.isRoutable(parent)) {
                     parent.routingPoints = points;
@@ -335,3 +336,3 @@ parent.removeAll(function (e) { return e instanceof model_1.SRoutingHandle; });
             var parent = handleMove.parent;
-            if (model_1.isRoutable(parent) && handleMove.fromPosition !== undefined) {
+            if (model_2.isRoutable(parent) && handleMove.fromPosition !== undefined) {
                 if (_this.reverse && t === 1) {
@@ -338,0 +339,0 @@ var revPoints = _this.originalRoutingPoints.get(parent.id);

lib/features/edit/model.d.ts

@@ -16,19 +16,9 @@ /********************************************************************************
  ********************************************************************************/
-import { Point } from '../../utils/geometry';
 import { SModelElement, SChildElement, SParentElement } from '../../base/model/smodel';
-import { SModelExtension } from '../../base/model/smodel-extension';
 import { Selectable } from '../select/model';
 import { Hoverable } from '../hover/model';
-import { RoutedPoint } from '../../graph/routing';
+import { RoutedPoint } from '../routing/routing';
 import { SDanglingAnchor } from '../../graph/sgraph';
+import { Routable } from '../routing/model';
 export declare const editFeature: unique symbol;
-export interface Routable extends SModelExtension {
-    routingPoints: Point[];
-    readonly source?: SModelElement;
-    readonly target?: SModelElement;
-    sourceId?: string;
-    targetId?: string;
-    route(): RoutedPoint[];
-}
-export declare function isRoutable<T extends SModelElement>(element: T): element is T & Routable;
 export declare function canEditRouting(element: SModelElement): element is SModelElement & Routable;
@@ -35,0 +25,0 @@ export declare type RoutingHandleKind = 'junction' | 'line' | 'source' | 'target';

lib/features/edit/model.js

@@ -33,9 +33,6 @@ "use strict";
 var model_3 = require("../hover/model");
+var model_4 = require("../routing/model");
 exports.editFeature = Symbol('editFeature');
-function isRoutable(element) {
-    return element.routingPoints !== undefined && typeof (element.route) === 'function';
-}
-exports.isRoutable = isRoutable;
 function canEditRouting(element) {
-    return isRoutable(element) && element.hasFeature(exports.editFeature);
+    return model_4.isRoutable(element) && element.hasFeature(exports.editFeature);
 }
@@ -42,0 +39,0 @@ exports.canEditRouting = canEditRouting;

lib/features/edit/reconnect.d.ts

@@ -16,12 +16,6 @@ /********************************************************************************
  ********************************************************************************/
-import { Routable } from "./model";
+import { Routable } from "../routing/model";
 import { SModelElement } from "../../base/model/smodel";
 import { Action } from "../../base/actions/action";
 import { Command, CommandExecutionContext, CommandResult } from "../../base/commands/command";
-import { SModelExtension } from "../../base/model/smodel-extension";
-export declare const connectableFeature: unique symbol;
-export interface Connectable extends SModelExtension {
-    canConnect(routable: Routable, role: 'source' | 'target'): boolean;
-}
-export declare function isConnectable<T extends SModelElement>(element: T): element is Connectable & T;
 export declare class ReconnectAction implements Action {
@@ -28,0 +22,0 @@ readonly routableId: string;

lib/features/edit/reconnect.js

@@ -28,9 +28,4 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var model_1 = require("./model");
+var model_1 = require("../routing/model");
 var command_1 = require("../../base/commands/command");
-exports.connectableFeature = Symbol('connectableFeature');
-function isConnectable(element) {
-    return element.hasFeature(exports.connectableFeature) && element.canConnect;
-}
-exports.isConnectable = isConnectable;
 var ReconnectAction = /** @class */ (function () {
@@ -37,0 +32,0 @@ function ReconnectAction(routableId, newSourceId, newTargetId) {

lib/features/move/move.d.ts

@@ -24,4 +24,5 @@ /********************************************************************************
 import { IVNodeDecorator } from "../../base/views/vnode-decorators";
-import { Routable, SRoutingHandle } from '../edit/model';
+import { SRoutingHandle } from '../edit/model';
 import { Locateable } from './model';
+import { Routable } from "../routing/model";
 export declare class MoveAction implements Action {
@@ -28,0 +29,0 @@ readonly moves: ElementMove[];

lib/features/move/move.js

@@ -54,2 +54,3 @@ "use strict";
 var delete_1 = require("../edit/delete");
+var model_6 = require("../routing/model");
 var MoveAction = /** @class */ (function () {
@@ -107,3 +108,3 @@ function MoveAction(moves, animate) {
     MoveCommand.prototype.handleAttachedElement = function (element) {
-        if (model_4.isRoutable(element)) {
+        if (model_6.isRoutable(element)) {
             var source = element.source;
@@ -310,3 +311,3 @@ var sourceMove = source ? this.resolvedMoves.get(source.id) : undefined;
         var parent = handle.parent;
-        if (!model_4.isRoutable(parent)) {
+        if (!model_6.isRoutable(parent)) {
             return undefined;
@@ -371,3 +372,3 @@ }
                     var parent_1 = element.parent;
-                    if (model_4.isRoutable(parent_1) && element.danglingAnchor) {
+                    if (model_6.isRoutable(parent_1) && element.danglingAnchor) {
                         var handlePos = _this.getHandlePosition(element);
@@ -377,3 +378,3 @@ if (handlePos) {
                             var newEnd = model_3.findChildrenAtPosition(target.root, handlePosAbs)
-                                .find(function (e) { return reconnect_1.isConnectable(e) && e.canConnect(parent_1, element.kind); });
+                                .find(function (e) { return model_6.isConnectable(e) && e.canConnect(parent_1, element.kind); });
                             if (newEnd && _this.hasDragged) {
@@ -380,0 +381,0 @@ result.push(new reconnect_1.ReconnectAction(element.parent.id, element.kind === 'source' ? newEnd.id : parent_1.sourceId, element.kind === 'target' ? newEnd.id : parent_1.targetId));

lib/features/select/select.js

@@ -55,2 +55,3 @@ "use strict";
 var model_3 = require("./model");
+var model_4 = require("../routing/model");
 /**
@@ -229,4 +230,4 @@ * Triggered when the user changes the selection, e.g. by clicking on a selectable element. The resulting
                         result.push(new SelectAction([selectableTarget_1.id], deselect.map(function (e) { return e.id; })));
-                        var routableDeselect = deselect.filter(function (e) { return model_2.isRoutable(e); }).map(function (e) { return e.id; });
-                        if (model_2.isRoutable(selectableTarget_1))
+                        var routableDeselect = deselect.filter(function (e) { return model_4.isRoutable(e); }).map(function (e) { return e.id; });
+                        if (model_4.isRoutable(selectableTarget_1))
                             result.push(new edit_routing_1.SwitchEditModeAction([selectableTarget_1.id], routableDeselect));
@@ -239,3 +240,3 @@ else if (routableDeselect.length > 0)
                         result.push(new SelectAction([], [selectableTarget_1.id]));
-                        if (model_2.isRoutable(selectableTarget_1))
+                        if (model_4.isRoutable(selectableTarget_1))
                             result.push(new edit_routing_1.SwitchEditModeAction([], [selectableTarget_1.id]));
@@ -249,3 +250,3 @@ }
                     result.push(new SelectAction([], deselect.map(function (e) { return e.id; })));
-                    var routableDeselect = deselect.filter(function (e) { return model_2.isRoutable(e); }).map(function (e) { return e.id; });
+                    var routableDeselect = deselect.filter(function (e) { return model_4.isRoutable(e); }).map(function (e) { return e.id; });
                     if (routableDeselect.length > 0)
@@ -252,0 +253,0 @@ result.push(new edit_routing_1.SwitchEditModeAction([], routableDeselect));

lib/features/update/update-model.js

@@ -219,3 +219,3 @@ "use strict";
         }
-        if (model_3.isBoundsAware(left) && model_3.isBoundsAware(right)) {
+        if (model_3.isSizeable(left) && model_3.isSizeable(right)) {
             if (!geometry_1.isValidDimension(right.bounds)) {
@@ -222,0 +222,0 @@ right.bounds = {

lib/features/viewport/center-fit.js

@@ -196,3 +196,3 @@ "use strict";
             : 2 * this.action.padding;
-        var zoom = Math.min(model.canvasBounds.width / (bounds.width + delta), model.canvasBounds.height / bounds.height + delta);
+        var zoom = Math.min(model.canvasBounds.width / (bounds.width + delta), model.canvasBounds.height / (bounds.height + delta));
         if (this.action.maxZoom !== undefined)
@@ -199,0 +199,0 @@ zoom = Math.min(zoom, this.action.maxZoom);

lib/graph/sgraph.d.ts

@@ -16,14 +16,12 @@ /********************************************************************************
  ********************************************************************************/
-import { FluentIterable } from '../utils/iterable';
-import { SChildElement, SModelElementSchema, SModelRootSchema, SModelIndex, SModelElement, SParentElement } from '../base/model/smodel';
-import { Alignable, ModelLayoutOptions } from '../features/bounds/model';
+import { SChildElement, SModelElement, SModelElementSchema, SModelIndex, SModelRootSchema } from '../base/model/smodel';
+import { Alignable, ModelLayoutOptions, SShapeElement, SShapeElementSchema, BoundsAware } from '../features/bounds/model';
 import { Fadeable } from '../features/fade/model';
 import { Hoverable } from '../features/hover/model';
+import { Routable, SConnectableElement } from '../features/routing/model';
 import { Selectable } from '../features/select/model';
 import { ViewportRootElement } from '../features/viewport/viewport-root';
 import { Bounds, Point } from '../utils/geometry';
-import { SShapeElement, SShapeElementSchema } from '../features/bounds/model';
-import { Routable } from '../features/edit/model';
-import { RoutedPoint, IEdgeRouter } from './routing';
-import { Connectable } from '../features/edit/reconnect';
+import { FluentIterable } from '../utils/iterable';
+import { IEdgeRouter, RoutedPoint } from '../features/routing/routing';
 /**
@@ -47,43 +45,2 @@ * Serializable schema for graph-like models.
 /**
- * A connectable element is one that can have outgoing and incoming edges, i.e. it can be the source
- * or target element of an edge. There are two kinds of connectable elements: nodes (`SNode`) and
- * ports (`SPort`). A node represents a main entity, while a port is a connection point inside a node.
- */
-export declare abstract class SConnectableElement extends SShapeElement implements Connectable {
-    /**
-     * The incoming edges of this connectable element. They are resolved by the index, which must
-     * be an `SGraphIndex`.
-     */
-    readonly incomingEdges: FluentIterable<SEdge>;
-    /**
-     * The outgoing edges of this connectable element. They are resolved by the index, which must
-     * be an `SGraphIndex`.
-     */
-    readonly outgoingEdges: FluentIterable<SEdge>;
-    /**
-     * Compute an anchor position for routing an edge towards this element.
-     *
-     * The default implementation returns the element's center point. If edges should be connected
-     * differently, e.g. to some point on the boundary of the element's view, the according computation
-     * should be implemented in a subclass by overriding this method.
-     *
-     * @param referencePoint The point from which the edge is routed towards this element
-     * @param offset An optional offset value to be considered in the anchor computation;
-     *               positive values should shift the anchor away from this element, negative values
-     *               should shift the anchor more to the inside.
-     */
-    getAnchor(referencePoint: Point, offset?: number): Point;
-    /**
-     * Compute an anchor position for routing an edge towards this element and correct any mismatch
-     * of the coordinate systems.
-     *
-     * @param refPoint The point from which the edge is routed towards this element
-     * @param refContainer The parent element that defines the coordinate system for `refPoint`
-     * @param edge The edge for which the anchor is computed
-     * @param offset An optional offset value (see `getAnchor`)
-     */
-    getTranslatedAnchor(refPoint: Point, refContainer: SParentElement, edge: SEdge, offset?: number): Point;
-    canConnect(routable: Routable, role: string): boolean;
-}
-/**
  * Serializable schema for SNode.
@@ -144,3 +101,3 @@ */
  */
-export declare class SEdge extends SChildElement implements Fadeable, Selectable, Routable, Hoverable {
+export declare class SEdge extends SChildElement implements Fadeable, Selectable, Routable, Hoverable, BoundsAware {
     sourceId: string;
@@ -154,6 +111,8 @@ targetId: string;
     targetAnchorCorrection?: number;
-    router?: IEdgeRouter;
+    _router?: IEdgeRouter;
     readonly source: SConnectableElement | undefined;
     readonly target: SConnectableElement | undefined;
+    readonly router: IEdgeRouter;
     route(): RoutedPoint[];
+    readonly bounds: Bounds;
     hasFeature(feature: symbol): boolean;
@@ -160,0 +119,0 @@ }

lib/graph/sgraph.js

@@ -28,17 +28,16 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var iterable_1 = require("../utils/iterable");
 var smodel_1 = require("../base/model/smodel");
 var model_1 = require("../features/bounds/model");
-var model_2 = require("../features/fade/model");
-var model_3 = require("../features/hover/model");
-var model_4 = require("../features/move/model");
-var model_5 = require("../features/select/model");
+var delete_1 = require("../features/edit/delete");
+var model_2 = require("../features/edit/model");
+var model_3 = require("../features/fade/model");
+var model_4 = require("../features/hover/model");
+var model_5 = require("../features/move/model");
+var model_6 = require("../features/routing/model");
+var model_7 = require("../features/select/model");
 var viewport_root_1 = require("../features/viewport/viewport-root");
 var geometry_1 = require("../utils/geometry");
-var model_6 = require("../features/bounds/model");
-var model_7 = require("../features/edit/model");
-var smodel_utils_1 = require("../base/model/smodel-utils");
-var routing_1 = require("./routing");
-var reconnect_1 = require("../features/edit/reconnect");
-var delete_1 = require("../features/edit/delete");
+var iterable_1 = require("../utils/iterable");
+var routing_1 = require("../features/routing/routing");
+var model_8 = require("../features/edge-layout/model");
 /**
@@ -57,69 +56,2 @@ * Root element for graph-like models.
 /**
- * A connectable element is one that can have outgoing and incoming edges, i.e. it can be the source
- * or target element of an edge. There are two kinds of connectable elements: nodes (`SNode`) and
- * ports (`SPort`). A node represents a main entity, while a port is a connection point inside a node.
- */
-var SConnectableElement = /** @class */ (function (_super) {
-    __extends(SConnectableElement, _super);
-    function SConnectableElement() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Object.defineProperty(SConnectableElement.prototype, "incomingEdges", {
-        /**
-         * The incoming edges of this connectable element. They are resolved by the index, which must
-         * be an `SGraphIndex`.
-         */
-        get: function () {
-            return this.index.getIncomingEdges(this);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(SConnectableElement.prototype, "outgoingEdges", {
-        /**
-         * The outgoing edges of this connectable element. They are resolved by the index, which must
-         * be an `SGraphIndex`.
-         */
-        get: function () {
-            return this.index.getOutgoingEdges(this);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * Compute an anchor position for routing an edge towards this element.
-     *
-     * The default implementation returns the element's center point. If edges should be connected
-     * differently, e.g. to some point on the boundary of the element's view, the according computation
-     * should be implemented in a subclass by overriding this method.
-     *
-     * @param referencePoint The point from which the edge is routed towards this element
-     * @param offset An optional offset value to be considered in the anchor computation;
-     *               positive values should shift the anchor away from this element, negative values
-     *               should shift the anchor more to the inside.
-     */
-    SConnectableElement.prototype.getAnchor = function (referencePoint, offset) {
-        return geometry_1.center(this.bounds);
-    };
-    /**
-     * Compute an anchor position for routing an edge towards this element and correct any mismatch
-     * of the coordinate systems.
-     *
-     * @param refPoint The point from which the edge is routed towards this element
-     * @param refContainer The parent element that defines the coordinate system for `refPoint`
-     * @param edge The edge for which the anchor is computed
-     * @param offset An optional offset value (see `getAnchor`)
-     */
-    SConnectableElement.prototype.getTranslatedAnchor = function (refPoint, refContainer, edge, offset) {
-        var translatedRefPoint = smodel_utils_1.translatePoint(refPoint, refContainer, this.parent);
-        var anchor = this.getAnchor(translatedRefPoint, offset);
-        return smodel_utils_1.translatePoint(anchor, this.parent, edge.parent);
-    };
-    SConnectableElement.prototype.canConnect = function (routable, role) {
-        return true;
-    };
-    return SConnectableElement;
-}(model_6.SShapeElement));
-exports.SConnectableElement = SConnectableElement;
-/**
  * Model element class for nodes, which are the main entities in a graph. A node can be connected to
@@ -142,8 +74,8 @@ * another node via an SEdge. Such a connection can be direct, i.e. the node is the source or target of
     SNode.prototype.hasFeature = function (feature) {
-        return feature === model_5.selectFeature || feature === model_4.moveFeature || feature === model_1.boundsFeature
-            || feature === model_1.layoutContainerFeature || feature === model_2.fadeFeature || feature === model_3.hoverFeedbackFeature
-            || feature === model_3.popupFeature || feature === reconnect_1.connectableFeature || feature === delete_1.deletableFeature;
+        return feature === model_7.selectFeature || feature === model_5.moveFeature || feature === model_1.boundsFeature
+            || feature === model_1.layoutContainerFeature || feature === model_3.fadeFeature || feature === model_4.hoverFeedbackFeature
+            || feature === model_4.popupFeature || feature === model_6.connectableFeature || feature === delete_1.deletableFeature;
     };
     return SNode;
-}(SConnectableElement));
+}(model_6.SConnectableElement));
 exports.SNode = SNode;
@@ -163,7 +95,7 @@ /**
     SPort.prototype.hasFeature = function (feature) {
-        return feature === model_5.selectFeature || feature === model_1.boundsFeature || feature === model_2.fadeFeature
-            || feature === model_3.hoverFeedbackFeature || feature === reconnect_1.connectableFeature;
+        return feature === model_7.selectFeature || feature === model_1.boundsFeature || feature === model_3.fadeFeature
+            || feature === model_4.hoverFeedbackFeature || feature === model_6.connectableFeature;
     };
     return SPort;
-}(SConnectableElement));
+}(model_6.SConnectableElement));
 exports.SPort = SPort;
@@ -199,11 +131,31 @@ /**
     });
+    Object.defineProperty(SEdge.prototype, "router", {
+        get: function () {
+            if (!this._router)
+                this._router = new routing_1.LinearEdgeRouter();
+            return this._router;
+        },
+        enumerable: true,
+        configurable: true
+    });
     SEdge.prototype.route = function () {
-        if (this.router === undefined)
-            this.router = new routing_1.LinearEdgeRouter();
         var route = this.router.route(this);
-        return model_7.filterEditModeHandles(route, this);
+        return model_2.filterEditModeHandles(route, this);
     };
+    Object.defineProperty(SEdge.prototype, "bounds", {
+        get: function () {
+            // this should also work for splines, which have the convex hull property
+            return this.routingPoints.reduce(function (bounds, routingPoint) { return geometry_1.combine(bounds, {
+                x: routingPoint.x,
+                y: routingPoint.y,
+                width: 0,
+                height: 0
+            }); }, geometry_1.EMPTY_BOUNDS);
+        },
+        enumerable: true,
+        configurable: true
+    });
     SEdge.prototype.hasFeature = function (feature) {
-        return feature === model_2.fadeFeature || feature === model_5.selectFeature ||
-            feature === model_7.editFeature || feature === model_3.hoverFeedbackFeature ||
+        return feature === model_3.fadeFeature || feature === model_7.selectFeature ||
+            feature === model_2.editFeature || feature === model_4.hoverFeedbackFeature ||
             feature === delete_1.deletableFeature;
@@ -227,6 +179,6 @@ };
     SLabel.prototype.hasFeature = function (feature) {
-        return feature === model_1.boundsFeature || feature === model_1.alignFeature || feature === model_2.fadeFeature || feature === model_1.layoutableChildFeature;
+        return feature === model_1.boundsFeature || feature === model_1.alignFeature || feature === model_3.fadeFeature || feature === model_1.layoutableChildFeature || feature === model_8.edgeLayoutFeature;
     };
     return SLabel;
-}(model_6.SShapeElement));
+}(model_1.SShapeElement));
 exports.SLabel = SLabel;
@@ -245,6 +197,6 @@ /**
     SCompartment.prototype.hasFeature = function (feature) {
-        return feature === model_1.boundsFeature || feature === model_1.layoutContainerFeature || feature === model_1.layoutableChildFeature || feature === model_2.fadeFeature;
+        return feature === model_1.boundsFeature || feature === model_1.layoutContainerFeature || feature === model_1.layoutableChildFeature || feature === model_3.fadeFeature;
     };
     return SCompartment;
-}(model_6.SShapeElement));
+}(model_1.SShapeElement));
 exports.SCompartment = SCompartment;
@@ -358,4 +310,4 @@ /**
     return SDanglingAnchor;
-}(SConnectableElement));
+}(model_6.SConnectableElement));
 exports.SDanglingAnchor = SDanglingAnchor;
 //# sourceMappingURL=sgraph.js.map

lib/graph/views.d.ts

@@ -21,3 +21,3 @@ /********************************************************************************
 import { SCompartment, SEdge, SGraph, SLabel } from "./sgraph";
-import { RoutedPoint } from './routing';
+import { RoutedPoint } from '../features/routing/routing';
 /**
@@ -40,2 +40,3 @@ * IView component that turns an SGraph element and its children into a tree of virtual DOM elements.
     }): VNode;
+    getRadius(): number;
     protected getPosition(handle: SRoutingHandle, route: RoutedPoint[]): Point | undefined;
@@ -42,0 +43,0 @@ protected getJunctionPosition(handle: SRoutingHandle, route: RoutedPoint[]): Point | undefined;

lib/graph/views.js

@@ -23,3 +23,3 @@ "use strict";
 var smodel_utils_1 = require("../base/model/smodel-utils");
-var model_1 = require("../features/edit/model");
+var model_1 = require("../features/routing/model");
 /**
@@ -77,3 +77,3 @@ * IView component that turns an SGraph element and its children into a tree of virtual DOM elements.
             if (position !== undefined) {
-                var node = snabbdom_jsx_1.svg("circle", { "class-sprotty-routing-handle": true, "class-selected": handle.selected, "class-mouseover": handle.hoverFeedback, cx: position.x, cy: position.y }); // Radius must be specified via CSS
+                var node = snabbdom_jsx_1.svg("circle", { "class-sprotty-routing-handle": true, "class-selected": handle.selected, "class-mouseover": handle.hoverFeedback, cx: position.x, cy: position.y, r: this.getRadius() });
                 vnode_utils_1.setAttr(node, 'data-kind', handle.kind);
@@ -86,2 +86,5 @@ return node;
     };
+    SRoutingHandleView.prototype.getRadius = function () {
+        return 7;
+    };
     SRoutingHandleView.prototype.getPosition = function (handle, route) {
@@ -88,0 +91,0 @@ switch (handle.kind) {

lib/index.d.ts

@@ -32,2 +32,4 @@ /********************************************************************************
 export * from './base/model/smodel';
+export * from './base/tool-manager/tool-manager';
+export * from './base/tool-manager/tool';
 export * from './base/views/key-tool';
@@ -53,2 +55,5 @@ export * from './base/views/mouse-tool';
 export * from "./features/button/model";
+export * from "./features/edge-layout/di.config";
+export * from "./features/edge-layout/edge-layout";
+export * from "./features/edge-layout/model";
 export * from "./features/edit/create";
@@ -79,2 +84,4 @@ export * from "./features/edit/create-on-drag";
 export * from "./features/open/model";
+export * from "./features/routing/model";
+export * from "./features/routing/routing";
 export * from "./features/select/model";
@@ -103,3 +110,4 @@ export * from "./features/select/select";
 import decorationModule from "./features/decoration/di.config";
-export { moveModule, boundsModule, fadeModule, selectModule, undoRedoModule, viewportModule, hoverModule, exportModule, expandModule, openModule, buttonModule, decorationModule };
+import edgeLayoutModule from "./features/edge-layout/di.config";
+export { moveModule, boundsModule, fadeModule, selectModule, undoRedoModule, viewportModule, hoverModule, exportModule, expandModule, openModule, buttonModule, decorationModule, edgeLayoutModule };
 export * from "./graph/sgraph-factory";
@@ -106,0 +114,0 @@ export * from "./graph/sgraph";

lib/index.js

@@ -37,2 +37,4 @@ "use strict";
 __export(require("./base/model/smodel"));
+__export(require("./base/tool-manager/tool-manager"));
+__export(require("./base/tool-manager/tool"));
 __export(require("./base/views/key-tool"));
@@ -59,2 +61,5 @@ __export(require("./base/views/mouse-tool"));
 __export(require("./features/button/model"));
+__export(require("./features/edge-layout/di.config"));
+__export(require("./features/edge-layout/edge-layout"));
+__export(require("./features/edge-layout/model"));
 __export(require("./features/edit/create"));
@@ -85,2 +90,4 @@ __export(require("./features/edit/create-on-drag"));
 __export(require("./features/open/model"));
+__export(require("./features/routing/model"));
+__export(require("./features/routing/routing"));
 __export(require("./features/select/model"));
@@ -121,2 +128,4 @@ __export(require("./features/select/select"));
 exports.decorationModule = di_config_13.default;
+var di_config_14 = require("./features/edge-layout/di.config");
+exports.edgeLayoutModule = di_config_14.default;
 // ------------------ Graph ------------------
@@ -138,4 +147,4 @@ __export(require("./graph/sgraph-factory"));
 __export(require("./model-source/websocket"));
-var di_config_14 = require("./model-source/di.config");
-exports.modelSourceModule = di_config_14.default;
+var di_config_15 = require("./model-source/di.config");
+exports.modelSourceModule = di_config_15.default;
 // ------------------ Utilities ------------------
@@ -142,0 +151,0 @@ __export(require("./utils/anchors"));

lib/utils/geometry.d.ts

@@ -102,2 +102,3 @@ /********************************************************************************
  * Enumeration of possible directions (left, right, up, down)
+ * @deprecated do we use this? We should rather use a string type
  */
@@ -110,2 +111,3 @@ export declare enum Direction {
 }
+export declare type Orientation = 'north' | 'south' | 'east' | 'west';
 /**
@@ -185,2 +187,10 @@ * Returns the "straight line" distance between two points.
 /**
+ * Calculates a linear combination of p0 and p1 using lambda, i.e.
+ *   (1-lambda) * p0 + lambda * p1
+ * @param p0
+ * @param p1
+ * @param lambda
+ */
+export declare function linear(p0: Point, p1: Point, lambda: number): Point;
+/**
  * A diamond or rhombus is a quadrilateral whose four sides all have the same length.
@@ -187,0 +197,0 @@ * It consinsts of four points, a `topPoint`, `rightPoint`, `bottomPoint`, and a `leftPoint`,

lib/utils/geometry.js

@@ -88,2 +88,6 @@ "use strict";
 function combine(b0, b1) {
+    if (!isValidDimension(b0))
+        return isValidDimension(b1) ? b1 : exports.EMPTY_BOUNDS;
+    if (!isValidDimension(b1))
+        return b0;
     var minX = Math.min(b0.x, b1.x);
@@ -144,2 +148,3 @@ var minY = Math.min(b0.y, b1.y);
  * Enumeration of possible directions (left, right, up, down)
+ * @deprecated do we use this? We should rather use a string type
  */
@@ -276,2 +281,16 @@ var Direction;
 /**
+ * Calculates a linear combination of p0 and p1 using lambda, i.e.
+ *   (1-lambda) * p0 + lambda * p1
+ * @param p0
+ * @param p1
+ * @param lambda
+ */
+function linear(p0, p1, lambda) {
+    return {
+        x: (1 - lambda) * p0.x + lambda * p1.x,
+        y: (1 - lambda) * p0.y + lambda * p1.y
+    };
+}
+exports.linear = linear;
+/**
  * A diamond or rhombus is a quadrilateral whose four sides all have the same length.
@@ -278,0 +297,0 @@ * It consinsts of four points, a `topPoint`, `rightPoint`, `bottomPoint`, and a `leftPoint`,

package.json

 {
   "name": "sprotty",
-  "version": "0.5.0-next.cf6ff2f",
+  "version": "0.5.0-next.d035414",
   "description": "A next-gen framework for graphical views",
@@ -62,7 +62,7 @@ "license": "(EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0)",
     "@types/node": "^8.0.14",
-    "bootstrap": "^4.0.0",
     "chai": "^4.1.0",
     "circular-dependency-plugin": "^2.0.0",
     "core-js": "^2.5.1",
-    "dom4": "^1.8.5",
+    "css-loader": "^2.1.0",
+    "http-server": "^0.11.1",
     "jenkins-mocha": "^6.0.0",
@@ -79,2 +79,3 @@ "jsdom": "9.12.0",
     "source-map-loader": "^0.2.3",
+    "style-loader": "^0.23.1",
     "ts-loader": "^4.4.2",
@@ -98,2 +99,4 @@ "ts-node": "<7.0.0",
     "examples:watch": "webpack --watch --progress --config ./configs/webpack.config.js",
+    "examples:run": "npx http-server examples",
+    "prepublishOnly": "yarn run test",
     "publish:next": "yarn publish --new-version \"$(semver $npm_package_version -i minor)-next.$(git rev-parse --short HEAD)\" --tag next",
@@ -100,0 +103,0 @@ "publish:latest": "yarn publish --tag latest"

README.md

@@ -1,3 +0,4 @@
-# sprotty
+# Sprotty
 
+[![Gitpod - Code Now](https://img.shields.io/badge/Gitpod-code%20now-blue.svg?longCache=true)](https://gitpod.io#https://github.com/eclipse/sprotty)
 [![Join the chat at https://gitter.im/eclipse/sprotty](https://badges.gitter.im/eclipse/sprotty.svg)](https://gitter.im/eclipse/sprotty?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
@@ -7,2 +8,8 @@
 
+<img src="images/screenshot0.png" width="23%" align="left">
+<img src="images/screenshot1.png" width="23%" align="left">
+<img src="images/screenshot2.png" width="23%" align="left">
+<img src="images/screenshot3.png" width="23%"> 
+
+  
 Some selected features:
@@ -18,4 +25,20 @@
 
-The server part of sprotty is written in Java / [Xtend](http://xtend-lang.org) and is available via [Maven Central](http://repo.maven.apache.org/maven2/org/eclipse/sprotty/) or [JCenter](http://jcenter.bintray.com/org/eclipse/sprotty/).
+## Repositories
 
-For further information please consult the [wiki](https://github.com/theia-ide/sprotty/wiki) or this [blog post](http://typefox.io/sprotty-a-web-based-diagramming-framework).
+The Sprotty project spans across four GitHub repositories
+* sprotty (this repository) contains client code (TypeScript) and the examples.
+* [sprotty-server](https://github.com/eclipse/sprotty-server) contains server code (Java/Xtend) including server-side diagram layout, the extension of the Language Server Protocol, and the integration with the Xtext framework.
+* [sprotty-theia](https://github.com/eclipse/sprotty-theia) contains the glue code (TypeScript) to integrate sprotty views in the Theia IDE.
+* [sprotty-layout](https://github.com/eclipse/sprotty-layout) contains the API for client-side diagram layout and an implementation based on the Eclipse Layout Kernel.
+
+## Docs
+
+For further information please consult the [wiki](https://github.com/eclipse/sprotty/wiki) or this [blog post](http://typefox.io/sprotty-a-web-based-diagramming-framework).
+
+## References
+
+- [DSL in the Cloud example](http://github.com/TypeFox/theia-xtext-sprotty-example) an example using Xtext, Theia and Sprotty to create a DSL workbench in the cloud.
+- [npm dependencies](http://npm-dependencies.com/) to discover dependencies of npm packages
+- [Examples](http://sprotty-demo.typefox.io) a hosted version of some Sprotty examples
+- [yangster](http://github.com/theia-ide/yangster) a Theia extension for the YANG language.
+

src/base/actions/action-dispatcher.ts

@@ -114,1 +114,3 @@ /********************************************************************************
 }
+
+export type IActionDispatcherProvider = () => Promise<IActionDispatcher>;

src/base/di.config.ts

@@ -38,2 +38,4 @@ /********************************************************************************
 import { CommandActionHandlerInitializer } from "./commands/command";
+import { CssClassDecorator } from "./views/css-class-decorator";
+import { ToolManager, DefaultToolsEnablingKeyListener, ToolManagerActionHandlerInitializer } from "./tool-manager/tool-manager";
 
@@ -105,20 +107,16 @@ const defaultContainerModule = new ContainerModule(bind => {
     bind(IdDecorator).toSelf().inSingletonScope();
-    bind(TYPES.IVNodeDecorator).toDynamicValue(context =>
-        context.container.get(IdDecorator)).inSingletonScope();
+    bind(TYPES.IVNodeDecorator).toService(IdDecorator);
+    bind(TYPES.HiddenVNodeDecorator).toService(IdDecorator);
+    bind(CssClassDecorator).toSelf().inSingletonScope();
+    bind(TYPES.IVNodeDecorator).toService(CssClassDecorator);
+    bind(TYPES.HiddenVNodeDecorator).toService(CssClassDecorator);
     bind(MouseTool).toSelf().inSingletonScope();
-    bind(TYPES.IVNodeDecorator).toDynamicValue(context =>
-        context.container.get(MouseTool)).inSingletonScope();
+    bind(TYPES.IVNodeDecorator).toService(MouseTool);
     bind(KeyTool).toSelf().inSingletonScope();
-    bind(TYPES.IVNodeDecorator).toDynamicValue(context =>
-        context.container.get(KeyTool)).inSingletonScope();
+    bind(TYPES.IVNodeDecorator).toService(KeyTool);
     bind(FocusFixDecorator).toSelf().inSingletonScope();
-    bind(TYPES.IVNodeDecorator).toDynamicValue(context =>
-        context.container.get(FocusFixDecorator)).inSingletonScope();
-    bind(TYPES.PopupVNodeDecorator).toDynamicValue(context =>
-        context.container.get(IdDecorator)).inSingletonScope();
+    bind(TYPES.IVNodeDecorator).toService(FocusFixDecorator);
+    bind(TYPES.PopupVNodeDecorator).toService(IdDecorator);
     bind(PopupMouseTool).toSelf().inSingletonScope();
-    bind(TYPES.PopupVNodeDecorator).toDynamicValue(context =>
-        context.container.get(PopupMouseTool)).inSingletonScope();
-    bind(TYPES.HiddenVNodeDecorator).toDynamicValue(context =>
-        context.container.get(IdDecorator)).inSingletonScope();
+    bind(TYPES.PopupVNodeDecorator).toService(PopupMouseTool);
 
@@ -131,8 +129,11 @@ // Animation Frame Sync ------------------------------------------
     bind(CanvasBoundsInitializer).toSelf().inSingletonScope();
-    bind(TYPES.IVNodeDecorator).toDynamicValue(context =>
-        context.container.get(CanvasBoundsInitializer)).inSingletonScope();
+    bind(TYPES.IVNodeDecorator).toService(CanvasBoundsInitializer);
     bind(TYPES.SModelStorage).to(SModelStorage).inSingletonScope();
 
+    // Tool manager initialization ------------------------------------
+    bind(TYPES.IToolManager).to(ToolManager).inSingletonScope();
+    bind(TYPES.KeyListener).to(DefaultToolsEnablingKeyListener);
+    bind(TYPES.IActionHandlerInitializer).to(ToolManagerActionHandlerInitializer);
 });
 
 export default defaultContainerModule;

src/base/model/smodel.ts

@@ -29,2 +29,3 @@ /********************************************************************************
     children?: SModelElementSchema[]
+    cssClasses?: string[]
 }
@@ -47,2 +48,3 @@
     id: string;
+    cssClasses?: string[];
 
@@ -49,0 +51,0 @@ get root(): SModelRoot {

src/base/types.ts

@@ -59,3 +59,4 @@ /********************************************************************************
     ViewRegistry: Symbol('ViewRegistry'),
-    IVNodeDecorator: Symbol('IVNodeDecorator')
+    IVNodeDecorator: Symbol('IVNodeDecorator'),
+    IToolManager: Symbol('IToolManager')
 };

src/base/views/key-tool.ts

@@ -56,2 +56,6 @@ /********************************************************************************
 
+    keyUp(element: SModelRoot, event: KeyboardEvent): void {
+        this.handleEvent('keyUp', element, event);
+    }
+
     focus() {}
@@ -63,2 +67,3 @@
             on(vnode, 'keydown', this.keyDown.bind(this), element);
+            on(vnode, 'keyup', this.keyUp.bind(this), element);
         }
@@ -77,2 +82,6 @@ return vnode;
     }
+
+    keyUp(element: SModelElement, event: KeyboardEvent): Action[] {
+        return [];
+    }
 }

src/features/decoration/decoration-placer.ts

@@ -25,3 +25,3 @@ /********************************************************************************
 import { isSizeable } from "../bounds/model";
-import { isRoutable } from "../edit/model";
+import { isRoutable } from "../routing/model";
 
@@ -28,0 +28,0 @@ @injectable()

src/features/decoration/model.ts

@@ -44,5 +44,8 @@ /********************************************************************************
 export class SIssueMarker extends SDecoration {
-    messages: string[];
+    issues: SIssue[];
+}
+
+export class SIssue {
+    message: string;
     severity: SIssueSeverity;
 }
-

src/features/edit/edit-routing.ts

@@ -19,3 +19,3 @@ /********************************************************************************
 import { Point } from "../../utils/geometry";
-import { Routable, isRoutable, canEditRouting, SRoutingHandle, RoutingHandleKind } from './model';
+import { canEditRouting, SRoutingHandle, RoutingHandleKind } from './model';
 import { Action } from "../../base/actions/action";
@@ -26,2 +26,3 @@ import { Command, CommandExecutionContext, CommandResult } from "../../base/commands/command";
 import { SDanglingAnchor } from "../../graph/sgraph";
+import { Routable, isRoutable } from "../routing/model";
 
@@ -28,0 +29,0 @@ export function createRoutingHandle(kind: RoutingHandleKind, parentId: string, index: number): SRoutingHandle {

src/features/edit/model.ts

@@ -19,24 +19,11 @@ /********************************************************************************
 import { SModelElement, SChildElement, SParentElement } from '../../base/model/smodel';
-import { SModelExtension } from '../../base/model/smodel-extension';
 import { Selectable, selectFeature } from '../select/model';
 import { moveFeature } from '../move/model';
 import { Hoverable, hoverFeedbackFeature } from '../hover/model';
-import { RoutedPoint } from '../../graph/routing';
+import { RoutedPoint } from '../routing/routing';
 import { SDanglingAnchor } from '../../graph/sgraph';
+import { Routable, isRoutable } from '../routing/model';
 
 export const editFeature = Symbol('editFeature');
 
-export interface Routable extends SModelExtension {
-    routingPoints: Point[];
-    readonly source?: SModelElement;
-    readonly target?: SModelElement;
-    sourceId?: string,
-    targetId?: string,
-    route(): RoutedPoint[];
-}
-
-export function isRoutable<T extends SModelElement>(element: T): element is T & Routable {
-    return (element as any).routingPoints !== undefined && typeof((element as any).route) === 'function';
-}
-
 export function canEditRouting(element: SModelElement): element is SModelElement & Routable {
@@ -43,0 +30,0 @@ return isRoutable(element) && element.hasFeature(editFeature);

src/features/edit/reconnect.ts

@@ -17,19 +17,7 @@ /********************************************************************************
 
-import { Routable, isRoutable } from "./model";
+import { Routable, isRoutable } from "../routing/model";
 import { SModelElement } from "../../base/model/smodel";
 import { Action } from "../../base/actions/action";
 import { Command, CommandExecutionContext, CommandResult } from "../../base/commands/command";
-import { SModelExtension } from "../../base/model/smodel-extension";
 
-export const connectableFeature = Symbol('connectableFeature');
-
-export interface Connectable extends SModelExtension {
-    canConnect(routable: Routable, role: 'source' | 'target'): boolean;
-}
-
-export function isConnectable<T extends SModelElement>(element: T): element is Connectable & T {
-    return element.hasFeature(connectableFeature) && (element as any).canConnect;
-}
-
-
 export class ReconnectAction implements Action {
@@ -36,0 +24,0 @@ readonly kind =  ReconnectCommand.KIND;

src/features/move/move.ts

@@ -32,11 +32,12 @@ /********************************************************************************
 import { isAlignable, findChildrenAtPosition } from "../bounds/model";
-import { Routable, isRoutable, SRoutingHandle } from '../edit/model';
+import { SRoutingHandle } from '../edit/model';
 import { MoveRoutingHandleAction, HandleMove, SwitchEditModeAction } from "../edit/edit-routing";
 import { isMoveable, Locateable, isLocateable } from './model';
-import { RoutedPoint } from "../../graph/routing";
+import { RoutedPoint } from "../routing/routing";
 import { isCreatingOnDrag } from "../edit/create-on-drag";
 import { SelectAllAction, SelectAction } from "../select/select";
 import { SDanglingAnchor } from "../../graph/sgraph";
-import { isConnectable, ReconnectAction } from "../edit/reconnect";
+import { ReconnectAction } from "../edit/reconnect";
 import { DeleteElementAction } from "../edit/delete";
+import { isConnectable, isRoutable, Routable } from "../routing/model";
 
@@ -43,0 +44,0 @@ export class MoveAction implements Action {

src/features/select/select.ts

@@ -31,5 +31,6 @@ /********************************************************************************
 import { SButton } from '../button/model';
-import { isRoutable, SRoutingHandle } from '../edit/model';
+import { SRoutingHandle } from '../edit/model';
 import { SwitchEditModeAction } from '../edit/edit-routing';
 import { isSelectable } from "./model";
+import { isRoutable } from '../routing/model';
 
@@ -36,0 +37,0 @@ /**

src/features/update/update-model.ts

@@ -27,3 +27,3 @@ /********************************************************************************
 import { isLocateable } from "../move/model";
-import { isBoundsAware } from "../bounds/model";
+import { isSizeable } from "../bounds/model";
 import { ViewportRootElement } from "../viewport/viewport-root";
@@ -210,3 +210,3 @@ import { isSelectable } from "../select/model";
         }
-        if (isBoundsAware(left) && isBoundsAware(right)) {
+        if (isSizeable(left) && isSizeable(right)) {
             if (!isValidDimension(right.bounds)) {
@@ -213,0 +213,0 @@ right.bounds = {

src/features/viewport/center-fit.ts

@@ -200,3 +200,3 @@ /********************************************************************************
             model.canvasBounds.width / (bounds.width + delta),
-            model.canvasBounds.height / bounds.height + delta);
+            model.canvasBounds.height / (bounds.height + delta));
         if (this.action.maxZoom !== undefined)
@@ -203,0 +203,0 @@ zoom = Math.min(zoom, this.action.maxZoom);

src/graph/sgraph.spec.ts

@@ -23,3 +23,3 @@ /********************************************************************************
 import { SNode, SEdge, SGraph, SPort } from './sgraph';
-import { RoutedPoint } from "./routing";
+import { RoutedPoint } from "../features/routing/routing";
 
@@ -26,0 +26,0 @@ describe('SEdge', () => {

src/graph/sgraph.ts

@@ -17,21 +17,17 @@ /********************************************************************************
 
-import { FluentIterable, FluentIterableImpl } from '../utils/iterable';
-import {
-    SChildElement, SModelElementSchema, SModelRootSchema, SModelIndex, SModelElement, SParentElement
-} from '../base/model/smodel';
-import {
-    boundsFeature, layoutContainerFeature, layoutableChildFeature, Alignable, alignFeature, ModelLayoutOptions
-} from '../features/bounds/model';
+import { SChildElement, SModelElement, SModelElementSchema, SModelIndex, SModelRootSchema } from '../base/model/smodel';
+import { Alignable, alignFeature, boundsFeature, layoutableChildFeature, layoutContainerFeature, ModelLayoutOptions,
+    SShapeElement, SShapeElementSchema, BoundsAware } from '../features/bounds/model';
+import { deletableFeature } from '../features/edit/delete';
+import { editFeature, filterEditModeHandles } from '../features/edit/model';
 import { Fadeable, fadeFeature } from '../features/fade/model';
 import { Hoverable, hoverFeedbackFeature, popupFeature } from '../features/hover/model';
 import { moveFeature } from '../features/move/model';
+import { Routable, SConnectableElement, connectableFeature } from '../features/routing/model';
 import { Selectable, selectFeature } from '../features/select/model';
 import { ViewportRootElement } from '../features/viewport/viewport-root';
-import { Bounds, ORIGIN_POINT, Point, center } from '../utils/geometry';
-import { SShapeElement, SShapeElementSchema } from '../features/bounds/model';
-import { editFeature, Routable, filterEditModeHandles } from '../features/edit/model';
-import { translatePoint } from '../base/model/smodel-utils';
-import { RoutedPoint, LinearEdgeRouter, IEdgeRouter } from './routing';
-import { connectableFeature, Connectable } from '../features/edit/reconnect';
-import { deletableFeature } from '../features/edit/delete';
+import { Bounds, ORIGIN_POINT, Point, EMPTY_BOUNDS, combine } from '../utils/geometry';
+import { FluentIterable, FluentIterableImpl } from '../utils/iterable';
+import { IEdgeRouter, LinearEdgeRouter, RoutedPoint } from '../features/routing/routing';
+import { edgeLayoutFeature } from '../features/edge-layout/model';
 
@@ -61,61 +57,2 @@ /**
 /**
- * A connectable element is one that can have outgoing and incoming edges, i.e. it can be the source
- * or target element of an edge. There are two kinds of connectable elements: nodes (`SNode`) and
- * ports (`SPort`). A node represents a main entity, while a port is a connection point inside a node.
- */
-export abstract class SConnectableElement extends SShapeElement implements Connectable {
-
-    /**
-     * The incoming edges of this connectable element. They are resolved by the index, which must
-     * be an `SGraphIndex`.
-     */
-    get incomingEdges(): FluentIterable<SEdge> {
-        return (this.index as SGraphIndex).getIncomingEdges(this);
-    }
-
-    /**
-     * The outgoing edges of this connectable element. They are resolved by the index, which must
-     * be an `SGraphIndex`.
-     */
-    get outgoingEdges(): FluentIterable<SEdge> {
-        return (this.index as SGraphIndex).getOutgoingEdges(this);
-    }
-
-    /**
-     * Compute an anchor position for routing an edge towards this element.
-     *
-     * The default implementation returns the element's center point. If edges should be connected
-     * differently, e.g. to some point on the boundary of the element's view, the according computation
-     * should be implemented in a subclass by overriding this method.
-     *
-     * @param referencePoint The point from which the edge is routed towards this element
-     * @param offset An optional offset value to be considered in the anchor computation;
-     *               positive values should shift the anchor away from this element, negative values
-     *               should shift the anchor more to the inside.
-     */
-    getAnchor(referencePoint: Point, offset?: number): Point {
-        return center(this.bounds);
-    }
-
-    /**
-     * Compute an anchor position for routing an edge towards this element and correct any mismatch
-     * of the coordinate systems.
-     *
-     * @param refPoint The point from which the edge is routed towards this element
-     * @param refContainer The parent element that defines the coordinate system for `refPoint`
-     * @param edge The edge for which the anchor is computed
-     * @param offset An optional offset value (see `getAnchor`)
-     */
-    getTranslatedAnchor(refPoint: Point, refContainer: SParentElement, edge: SEdge, offset?: number): Point {
-        const translatedRefPoint = translatePoint(refPoint, refContainer, this.parent);
-        const anchor = this.getAnchor(translatedRefPoint, offset);
-        return translatePoint(anchor, this.parent, edge.parent);
-    }
-
-    canConnect(routable: Routable, role: string) {
-        return true;
-    }
-}
-
-/**
  * Serializable schema for SNode.
@@ -193,3 +130,3 @@ */
  */
-export class SEdge extends SChildElement implements Fadeable, Selectable, Routable, Hoverable {
+export class SEdge extends SChildElement implements Fadeable, Selectable, Routable, Hoverable, BoundsAware {
     sourceId: string;
@@ -203,3 +140,3 @@ targetId: string;
     targetAnchorCorrection?: number;
-    router?: IEdgeRouter;
+    _router?: IEdgeRouter;
 
@@ -214,5 +151,9 @@ get source(): SConnectableElement | undefined {
 
+    get router() {
+        if (!this._router)
+            this._router = new LinearEdgeRouter();
+        return this._router;
+    }
+
     route(): RoutedPoint[] {
-        if (this.router === undefined)
-            this.router = new LinearEdgeRouter();
         const route = this.router.route(this);
@@ -222,2 +163,12 @@ return filterEditModeHandles(route, this);
 
+    get bounds(): Bounds {
+        // this should also work for splines, which have the convex hull property
+        return this.routingPoints.reduce<Bounds>((bounds, routingPoint) => combine(bounds, {
+            x: routingPoint.x,
+            y: routingPoint.y,
+            width: 0,
+            height: 0
+        }), EMPTY_BOUNDS);
+    }
+
     hasFeature(feature: symbol): boolean {
@@ -248,3 +199,3 @@ return feature === fadeFeature || feature === selectFeature ||
     hasFeature(feature: symbol) {
-        return feature === boundsFeature || feature === alignFeature || feature === fadeFeature || feature === layoutableChildFeature;
+        return feature === boundsFeature || feature === alignFeature || feature === fadeFeature || feature === layoutableChildFeature || feature === edgeLayoutFeature;
     }
@@ -251,0 +202,0 @@ }

src/index.ts

@@ -40,2 +40,5 @@ /********************************************************************************
 
+export * from './base/tool-manager/tool-manager';
+export * from './base/tool-manager/tool';
+
 export * from './base/views/key-tool';
@@ -69,2 +72,6 @@ export * from './base/views/mouse-tool';
 
+export * from "./features/edge-layout/di.config";
+export * from "./features/edge-layout/edge-layout";
+export * from "./features/edge-layout/model";
+
 export * from "./features/edit/create";
@@ -103,2 +110,5 @@ export * from "./features/edit/create-on-drag";
 
+export * from "./features/routing/model";
+export * from "./features/routing/routing";
+
 export * from "./features/select/model";
@@ -131,4 +141,6 @@ export * from "./features/select/select";
 import decorationModule from "./features/decoration/di.config";
+import edgeLayoutModule from "./features/edge-layout/di.config";
 
-export { moveModule, boundsModule, fadeModule, selectModule, undoRedoModule, viewportModule, hoverModule, exportModule, expandModule, openModule, buttonModule, decorationModule };
+export { moveModule, boundsModule, fadeModule, selectModule, undoRedoModule, viewportModule, hoverModule,
+    exportModule, expandModule, openModule, buttonModule, decorationModule, edgeLayoutModule };
 
@@ -135,0 +147,0 @@

src/utils/geometry.ts

@@ -112,2 +112,6 @@ /********************************************************************************
 export function combine(b0: Bounds, b1: Bounds): Bounds {
+    if (!isValidDimension(b0))
+        return isValidDimension(b1) ? b1 : EMPTY_BOUNDS;
+    if (!isValidDimension(b1))
+        return b0;
     const minX = Math.min(b0.x, b1.x);
@@ -178,5 +182,8 @@ const minY = Math.min(b0.y, b1.y);
  * Enumeration of possible directions (left, right, up, down)
+ * @deprecated do we use this? We should rather use a string type
  */
 export enum Direction { left, right, up, down }
 
+export type Orientation = 'north' | 'south' | 'east' | 'west';
+
 /**
@@ -305,2 +312,16 @@ * Returns the "straight line" distance between two points.
 /**
+ * Calculates a linear combination of p0 and p1 using lambda, i.e.
+ *   (1-lambda) * p0 + lambda * p1
+ * @param p0
+ * @param p1
+ * @param lambda
+ */
+export function linear(p0: Point, p1: Point, lambda: number): Point {
+    return {
+        x: (1 - lambda) * p0.x + lambda * p1.x,
+        y: (1 - lambda) * p0.y + lambda * p1.y
+    };
+}
+
+/**
  * A diamond or rhombus is a quadrilateral whose four sides all have the same length.
@@ -307,0 +328,0 @@ * It consinsts of four points, a `topPoint`, `rightPoint`, `bottomPoint`, and a `leftPoint`,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Unidentified License

License

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

Found 2 instances in 1 package

Improved metrics

Total package byte prevSize

1905939

increased by5.96%

Number of package files

650

increased by6.56%

Lines of code

32566

increased by5.7%

Number of lines in readme file

43

increased by115%

Worsened metrics

Dev dependency count

29

increased by3.57%

Number of low license alerts

37

increased by12.12%

Published versions last year

20

decreased by-4.76%

No dependency changes