@glsp/sprotty-client - npm Package Compare versions

Comparing version 0.2.0-next.03ae33a5 to 0.2.0-next.078a5225

lib/base/di.config.js

@@ -24,2 +24,3 @@ "use strict";
 var tool_manager_action_handler_1 = require("./tool-manager/tool-manager-action-handler");
+var viewer_options_1 = require("./views/viewer-options");
 var defaultGLSPModule = new inversify_1.ContainerModule(function (bind, unbind, isBound, rebind) {
@@ -31,4 +32,12 @@ // Tool manager initialization ------------------------------------
     lib_1.configureCommand({ bind: bind, isBound: isBound }, update_model_command_1.FeedbackAwareUpdateModelCommand);
+    bind(lib_1.TYPES.IActionHandlerInitializer).to(update_model_command_1.SetModelActionHandler);
+    bind(types_1.GLSP_TYPES.ViewerOptions).toConstantValue(viewer_options_1.defaultGLSPViewerOptions());
+    if (isBound(lib_1.TYPES.ViewerOptions)) {
+        rebind(lib_1.TYPES.ViewerOptions).toService(types_1.GLSP_TYPES.ViewerOptions);
+    }
+    else {
+        bind(lib_1.TYPES.ViewerOptions).toService(types_1.GLSP_TYPES.ViewerOptions);
+    }
 });
 exports.default = defaultGLSPModule;
 //# sourceMappingURL=di.config.js.map

lib/base/model/update-model-command.d.ts

@@ -1,4 +0,10 @@
-import { ActionHandlerRegistry, CommandExecutionContext, CommandResult, ILogger, SModelRoot } from "sprotty/lib";
+import { Action, ActionHandlerRegistry, CommandExecutionContext, CommandResult, ILogger, SetModelAction, SModelRoot } from "sprotty/lib";
 import { UpdateModelAction, UpdateModelCommand } from "sprotty/lib/features/update/update-model";
 import { IFeedbackActionDispatcher } from "src/features/tool-feedback/feedback-action-dispatcher";
+import { SelfInitializingActionHandler } from "../tool-manager/tool-manager-action-handler";
+export declare class SetModelActionHandler extends SelfInitializingActionHandler {
+    handle(action: Action): Action | void;
+    handledActionKinds: string[];
+}
+export declare function isSetModelAction(action: Action): action is SetModelAction;
 export interface SModelRootListener {
@@ -5,0 +11,0 @@ modelRootChanged(root: Readonly<SModelRoot>): void;

lib/base/model/update-model-command.js

@@ -48,2 +48,25 @@ "use strict";
 var types_1 = require("../../types");
+var tool_manager_action_handler_1 = require("../tool-manager/tool-manager-action-handler");
+/* ActionHandler that transforms a SetModelAction into an (feedback-aware) UpdateModelAction. This can be done because in sprotty
+*  UpdateModel behaves the same as SetModel if no model is present yet.*/
+var SetModelActionHandler = /** @class */ (function (_super) {
+    __extends(SetModelActionHandler, _super);
+    function SetModelActionHandler() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.handledActionKinds = [lib_1.SetModelCommand.KIND];
+        return _this;
+    }
+    SetModelActionHandler.prototype.handle = function (action) {
+        if (isSetModelAction(action)) {
+            return new update_model_1.UpdateModelAction(action.newRoot, false);
+        }
+    };
+    return SetModelActionHandler;
+}(tool_manager_action_handler_1.SelfInitializingActionHandler));
+exports.SetModelActionHandler = SetModelActionHandler;
+function isSetModelAction(action) {
+    return action !== undefined && (action.kind === lib_1.SetModelCommand.KIND)
+        && action.newRoot !== undefined;
+}
+exports.isSetModelAction = isSetModelAction;
 /**
@@ -50,0 +73,0 @@ * A special`UpdateModelCommand` that retrieves all registered `actions` from the `IFeedbackActionDispatcher` (if present) and applies their feedback

lib/features/tool-feedback/change-bounds-tool-feedback.d.ts

 import { VNode } from "snabbdom/vnode";
-import { Action, CommandExecutionContext, CommandResult, MouseListener, Point, SModelElement } from "sprotty/lib";
+import { Action, Bounds, CommandExecutionContext, CommandResult, MouseListener, Point, SModelElement } from "sprotty/lib";
+import { GLSPViewerOptions } from "../../base/views/viewer-options";
 import { FeedbackCommand } from "./model";
@@ -33,5 +34,12 @@ export declare class ShowChangeBoundsToolResizeFeedbackAction implements Action {
 export declare class FeedbackMoveMouseListener extends MouseListener {
+    protected glspViewerOptions: GLSPViewerOptions;
     hasDragged: boolean;
     lastDragPosition: Point | undefined;
+    hasCollided: boolean;
+    constructor(glspViewerOptions: GLSPViewerOptions);
     mouseDown(target: SModelElement, event: MouseEvent): Action[];
+    /**
+    * Used to return the collision target(s) or the collision chain in case of multiple selected elements
+    */
+    getCollisionChain(target: SModelElement, element: SModelElement, dx: number, dy: number, collisionChain: SModelElement[]): SModelElement[];
     mouseMove(target: SModelElement, event: MouseEvent): Action[];
@@ -42,2 +50,10 @@ mouseEnter(target: SModelElement, event: MouseEvent): Action[];
 }
+/**
+* Used to check if 1D boxes (lines) overlap
+*/
+export declare function isOverlapping1Dimension(x1: number, width1: number, x2: number, width2: number): boolean;
+/**
+* Used to check if 2 bounds are overlapping
+*/
+export declare function isOverlappingBounds(bounds1: Bounds, bounds2: Bounds): boolean;
 //# sourceMappingURL=change-bounds-tool-feedback.d.ts.map

lib/features/tool-feedback/change-bounds-tool-feedback.js

@@ -46,3 +46,5 @@ "use strict";
 var smodel_util_1 = require("../../utils/smodel-util");
+var viewpoint_util_1 = require("../../utils/viewpoint-util");
 var model_1 = require("../change-bounds/model");
+var cursor_feedback_1 = require("./cursor-feedback");
 var model_2 = require("./model");
@@ -121,5 +123,7 @@ var ShowChangeBoundsToolResizeFeedbackAction = /** @class */ (function () {
     __extends(FeedbackMoveMouseListener, _super);
-    function FeedbackMoveMouseListener() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+    function FeedbackMoveMouseListener(glspViewerOptions) {
+        var _this = _super.call(this) || this;
+        _this.glspViewerOptions = glspViewerOptions;
         _this.hasDragged = false;
+        _this.hasCollided = false;
         return _this;
@@ -140,3 +144,34 @@ }
     };
+    /**
+    * Used to return the collision target(s) or the collision chain in case of multiple selected elements
+    */
+    FeedbackMoveMouseListener.prototype.getCollisionChain = function (target, element, dx, dy, collisionChain) {
+        var _this = this;
+        if (lib_1.isMoveable(element) && model_1.isResizeable(element)) {
+            target.root.index.all()
+                .filter(function (candidate) { return lib_1.isSelectable(candidate) && element.id !== candidate.id && collisionChain.indexOf(candidate) < 0; })
+                .forEach(function (candidate) {
+                if (lib_1.isMoveable(element) && lib_1.isMoveable(candidate)) {
+                    if (model_1.isResizeable(element) && model_1.isResizeable(candidate)) {
+                        var futureBounds = {
+                            x: element.position.x + dx,
+                            y: element.position.y + dy,
+                            width: element.size.width,
+                            height: element.size.height
+                        };
+                        if (isOverlappingBounds(futureBounds, candidate.bounds) && !isOverlappingBounds(element.bounds, candidate.bounds)) {
+                            collisionChain.push(candidate);
+                            if (candidate.selected) {
+                                // Check what the selected candidate will collide with and add it to the chain
+                                collisionChain.push.apply(collisionChain, _this.getCollisionChain(target, candidate, dx, dy, collisionChain));
+                            }
+                        }
+                    }
+                }
+            });
+        }
+        return collisionChain;
+    };
     FeedbackMoveMouseListener.prototype.mouseMove = function (target, event) {
+        var _this = this;
         var result = [];
@@ -149,9 +184,37 @@ if (event.buttons === 0)
             var zoom = viewport ? viewport.zoom : 1;
+            var mousePoint_1 = viewpoint_util_1.getAbsolutePosition(target, event);
             var dx_1 = (event.pageX - this.lastDragPosition.x) / zoom;
             var dy_1 = (event.pageY - this.lastDragPosition.y) / zoom;
             var nodeMoves_1 = [];
+            var willCollide_1 = false;
+            var mouseOverElement_1 = false;
+            var collisionOccured_1 = false;
             target.root.index.all()
                 .filter(function (element) { return lib_1.isSelectable(element) && element.selected; })
                 .forEach(function (element) {
-                if (lib_1.isMoveable(element)) {
+                if (lib_1.isMoveable(element) && model_1.isResizeable(element)) {
+                    // If noElementOverlap Option is set perform collision detection
+                    if (_this.glspViewerOptions.noElementOverlap) {
+                        // After collision the mouse is back inside the element => change cursor back to default
+                        if (_this.hasCollided && lib_1.includes(element.bounds, mousePoint_1)) {
+                            mouseOverElement_1 = true;
+                            result.push(new cursor_feedback_1.ApplyCursorCSSFeedbackAction(cursor_feedback_1.CursorCSS.DEFAULT));
+                        }
+                        // Get only the valid, non-slected collision targets to avoid in-selection collisions
+                        var collisionTargets = _this.getCollisionChain(target, element, dx_1, dy_1, [])
+                            .filter(function (collidingElement) { return lib_1.isSelectable(collidingElement) && !collidingElement.selected; });
+                        if (collisionTargets.length > 0) {
+                            collisionTargets.forEach(function (collisionTarget) {
+                                if (model_1.isResizeable(collisionTarget)) {
+                                    willCollide_1 = true;
+                                    _this.hasCollided = true;
+                                    result.push(new cursor_feedback_1.ApplyCursorCSSFeedbackAction(cursor_feedback_1.CursorCSS.OVERLAP_FORBIDDEN));
+                                }
+                            });
+                        }
+                    }
+                }
+                if (lib_1.isMoveable(element) && !collisionOccured_1 && ((!willCollide_1 && !_this.hasCollided) ||
+                    (_this.hasCollided && !willCollide_1 && mouseOverElement_1))) {
+                    _this.hasCollided = false;
                     nodeMoves_1.push({
@@ -171,4 +234,5 @@ elementId: element.id,
             this.lastDragPosition = { x: event.pageX, y: event.pageY };
-            if (nodeMoves_1.length > 0)
+            if (nodeMoves_1.length > 0 && !this.hasCollided) {
                 result.push(new lib_1.MoveAction(nodeMoves_1, false));
+            }
         }
@@ -193,2 +257,17 @@ return result;
 exports.FeedbackMoveMouseListener = FeedbackMoveMouseListener;
+/**
+* Used to check if 1D boxes (lines) overlap
+*/
+function isOverlapping1Dimension(x1, width1, x2, width2) {
+    return x1 + width1 >= x2 && x2 + width2 >= x1;
+}
+exports.isOverlapping1Dimension = isOverlapping1Dimension;
+/**
+* Used to check if 2 bounds are overlapping
+*/
+function isOverlappingBounds(bounds1, bounds2) {
+    return isOverlapping1Dimension(bounds1.x, bounds1.width, bounds2.x, bounds2.width) &&
+        isOverlapping1Dimension(bounds1.y, bounds1.height, bounds2.y, bounds2.height);
+}
+exports.isOverlappingBounds = isOverlappingBounds;
 //# sourceMappingURL=change-bounds-tool-feedback.js.map

lib/features/tool-feedback/cursor-feedback.d.ts

 import { Action, CommandExecutionContext, SModelRoot } from "sprotty/lib";
 import { FeedbackCommand } from "./model";
 export declare enum CursorCSS {
+    DEFAULT = "default-mode",
+    OVERLAP_FORBIDDEN = "overlap-forbidden-mode",
     NODE_CREATION = "node-creation-mode",
@@ -5,0 +7,0 @@ EDGE_CREATION_SOURCE = "edge-creation-select-source-mode",

lib/features/tool-feedback/cursor-feedback.js

@@ -49,2 +49,4 @@ "use strict";
 (function (CursorCSS) {
+    CursorCSS["DEFAULT"] = "default-mode";
+    CursorCSS["OVERLAP_FORBIDDEN"] = "overlap-forbidden-mode";
     CursorCSS["NODE_CREATION"] = "node-creation-mode";
@@ -51,0 +53,0 @@ CursorCSS["EDGE_CREATION_SOURCE"] = "edge-creation-select-source-mode";

lib/features/tool-feedback/view.d.ts

@@ -29,3 +29,4 @@ /********************************************************************************
     protected getPosition(handle: SResizeHandle): Point | undefined;
+    getRadius(): number;
 }
 //# sourceMappingURL=view.d.ts.map

lib/features/tool-feedback/view.js

@@ -52,3 +52,3 @@ "use strict";
         if (position !== undefined) {
-            var node = snabbdom_jsx_1.svg("circle", { "class-sprotty-resize-handle": true, "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-resize-handle": true, "class-mouseover": handle.hoverFeedback, cx: position.x, cy: position.y, r: this.getRadius() });
             lib_1.setAttr(node, 'data-kind', handle.location);
@@ -78,2 +78,5 @@ return node;
     };
+    SResizeHandleView.prototype.getRadius = function () {
+        return 7;
+    };
     SResizeHandleView = __decorate([
@@ -80,0 +83,0 @@ inversify_1.injectable()

lib/features/tool-palette/tool-palette.d.ts

@@ -1,2 +0,2 @@
-import { AbstractUIExtension, Action, IActionDispatcher, ICommand } from "sprotty/lib";
+import { AbstractUIExtension, Action, IActionDispatcher, ICommand, SModelRoot } from "sprotty/lib";
 import { SelfInitializingActionHandler } from "../../base/tool-manager/tool-manager-action-handler";
@@ -12,4 +12,6 @@ import { Operation } from "../operation/set-operations";
     protected defaultToolsButton: HTMLElement;
+    modelRootId: string;
     initialize(): boolean;
     protected initializeContents(containerElement: HTMLElement): void;
+    protected onBeforeShow(containerElement: HTMLElement, root: Readonly<SModelRoot>): void;
     protected createBody(): void;
@@ -16,0 +18,0 @@ protected createHeader(): void;

lib/features/tool-palette/tool-palette.js

@@ -87,2 +87,5 @@ "use strict";
     };
+    ToolPalette.prototype.onBeforeShow = function (containerElement, root) {
+        this.modelRootId = root.id;
+    };
     ToolPalette.prototype.createBody = function () {
@@ -138,3 +141,3 @@ var _this = this;
         validateActionButton.onclick = function (ev) {
-            var modelIds = ["sprotty"];
+            var modelIds = [_this.modelRootId];
             _this.actionDispatcher.dispatch(new validate_1.RequestMarkersAction(modelIds));
@@ -141,0 +144,0 @@ };

lib/features/tools/change-bounds-tool.d.ts

 import { Action, KeyTool, MouseListener, SModelElement, SModelRoot, Tool } from "sprotty/lib";
+import { GLSPViewerOptions } from "../../base/views/viewer-options";
 import { IMouseTool } from "../mouse-tool/mouse-tool";
@@ -24,2 +25,3 @@ import { SelectionListener, SelectionService } from "../select/selection-service";
     protected feedbackDispatcher: IFeedbackActionDispatcher;
+    protected opts: GLSPViewerOptions;
     static ID: string;
@@ -29,3 +31,3 @@ readonly id: string;
     protected changeBoundsListener: ChangeBoundsListener;
-    constructor(selectionService: SelectionService, mouseTool: IMouseTool, keyTool: KeyTool, feedbackDispatcher: IFeedbackActionDispatcher);
+    constructor(selectionService: SelectionService, mouseTool: IMouseTool, keyTool: KeyTool, feedbackDispatcher: IFeedbackActionDispatcher, opts: GLSPViewerOptions);
     enable(): void;
@@ -32,0 +34,0 @@ disable(): void;

lib/features/tools/change-bounds-tool.js

@@ -59,3 +59,2 @@ "use strict";
 var operation_actions_1 = require("../operation/operation-actions");
-var model_2 = require("../reconnect/model");
 var selection_service_1 = require("../select/selection-service");
@@ -77,3 +76,3 @@ var change_bounds_tool_feedback_1 = require("../tool-feedback/change-bounds-tool-feedback");
 var ChangeBoundsTool = /** @class */ (function () {
-    function ChangeBoundsTool(selectionService, mouseTool, keyTool, feedbackDispatcher) {
+    function ChangeBoundsTool(selectionService, mouseTool, keyTool, feedbackDispatcher, opts) {
         this.selectionService = selectionService;
@@ -83,2 +82,3 @@ this.mouseTool = mouseTool;
         this.feedbackDispatcher = feedbackDispatcher;
+        this.opts = opts;
         this.id = ChangeBoundsTool_1.ID;
@@ -89,3 +89,3 @@ }
         // install feedback move mouse listener for client-side move updates
-        this.feedbackMoveMouseListener = new change_bounds_tool_feedback_1.FeedbackMoveMouseListener();
+        this.feedbackMoveMouseListener = new change_bounds_tool_feedback_1.FeedbackMoveMouseListener(this.opts);
         this.mouseTool.register(this.feedbackMoveMouseListener);
@@ -115,3 +115,4 @@ // instlal change bounds listener for client-side resize updates and server-side updates
         __param(3, inversify_1.inject(types_1.GLSP_TYPES.IFeedbackActionDispatcher)),
-        __metadata("design:paramtypes", [selection_service_1.SelectionService, Object, lib_1.KeyTool, Object])
+        __param(4, inversify_1.inject(types_1.GLSP_TYPES.ViewerOptions)),
+        __metadata("design:paramtypes", [selection_service_1.SelectionService, Object, lib_1.KeyTool, Object, Object])
     ], ChangeBoundsTool);
@@ -180,3 +181,3 @@ return ChangeBoundsTool;
             var newBounds_1 = [];
-            smodel_util_1.forEachElement(target, isNonRoutableSelectedBoundsAware, function (element) {
+            smodel_util_1.forEachElement(target, smodel_util_1.isNonRoutableSelectedBoundsAware, function (element) {
                 return createElementAndBounds(element).forEach(function (bounds) { return newBounds_1.push(bounds); });
@@ -319,5 +320,2 @@ });
 }
-function isNonRoutableSelectedBoundsAware(element) {
-    return lib_1.isBoundsAware(element) && smodel_util_1.isSelected(element) && !model_2.isRoutable(element);
-}
 //# sourceMappingURL=change-bounds-tool.js.map

lib/features/tools/edge-edit-tool.d.ts

 import { Action, AnchorComputerRegistry, EdgeRouterRegistry, MouseListener, SModelElement, SModelRoot, Tool } from "sprotty/lib";
 import { IMouseTool } from "../mouse-tool/mouse-tool";
 import { SelectionListener, SelectionService } from "../select/selection-service";
-import { FeedbackMoveMouseListener } from "../tool-feedback/change-bounds-tool-feedback";
-import { FeedbackEdgeSourceMovingMouseListener, FeedbackEdgeTargetMovingMouseListener } from "../tool-feedback/edge-edit-tool-feedback";
+import { FeedbackEdgeRouteMovingMouseListener, FeedbackEdgeSourceMovingMouseListener, FeedbackEdgeTargetMovingMouseListener } from "../tool-feedback/edge-edit-tool-feedback";
 import { IFeedbackActionDispatcher } from "../tool-feedback/feedback-action-dispatcher";
@@ -17,3 +16,3 @@ export declare class EdgeEditTool implements Tool {
     protected feedbackEdgeTargetMovingListener: FeedbackEdgeTargetMovingMouseListener;
-    protected feedbackMovingListener: FeedbackMoveMouseListener;
+    protected feedbackMovingListener: FeedbackEdgeRouteMovingMouseListener;
     protected reconnectEdgeListener: ReconnectEdgeListener;
@@ -20,0 +19,0 @@ constructor(selectionService: SelectionService, mouseTool: IMouseTool, feedbackDispatcher: IFeedbackActionDispatcher, anchorRegistry: AnchorComputerRegistry, edgeRouterRegistry?: EdgeRouterRegistry | undefined);

lib/index.d.ts

@@ -20,2 +20,3 @@ /********************************************************************************
 import modelHintsModule from "./features/hints/di.config";
+import layoutCommandsModule from "./features/layout/di.config";
 import glspMouseToolModule from "./features/mouse-tool/di.config";
@@ -30,4 +31,6 @@ import requestResponseModule from "./features/request-response/di.config";
 export * from './base/edit-config/edit-config';
+export * from './model-source/websocket-diagram-server';
 export * from './base/model/update-model-command';
 export * from './base/tool-manager/tool-manager-action-handler';
+export * from './base/views/viewer-options';
 export * from './features/change-bounds/model';
@@ -40,2 +43,3 @@ export * from './features/command-palette/action-definitions';
 export * from './features/hints/type-hints-action-initializer';
+export * from './features/mouse-tool/di.config';
 export * from './features/operation/operation-actions';
@@ -47,2 +51,3 @@ export * from './features/operation/set-operations';
 export * from './features/save/save';
+export * from './features/select/di.config';
 export * from './features/tool-feedback/creation-tool-feedback';
@@ -56,4 +61,3 @@ export * from './features/tool-feedback/model';
 export * from './features/validation/validate';
-export * from './features/mouse-tool/di.config';
-export * from './features/select/di.config';
+export * from './features/layout/layout-commands';
 export * from './lib/model';
@@ -66,3 +70,3 @@ export * from './types';
 export { validationModule, saveModule, executeModule, paletteModule, toolFeedbackModule, defaultGLSPModule, modelHintsModule, glspCommandPaletteModule, requestResponseModule, //
-glspSelectModule, glspMouseToolModule };
+glspSelectModule, glspMouseToolModule, layoutCommandsModule };
 //# sourceMappingURL=index.d.ts.map

lib/index.js

@@ -29,20 +29,24 @@ "use strict";
 exports.modelHintsModule = di_config_4.default;
-var di_config_5 = require("./features/mouse-tool/di.config");
-exports.glspMouseToolModule = di_config_5.default;
-var di_config_6 = require("./features/request-response/di.config");
-exports.requestResponseModule = di_config_6.default;
-var di_config_7 = require("./features/save/di.config");
-exports.saveModule = di_config_7.default;
-var di_config_8 = require("./features/select/di.config");
-exports.glspSelectModule = di_config_8.default;
-var di_config_9 = require("./features/tool-feedback/di.config");
-exports.toolFeedbackModule = di_config_9.default;
-var di_config_10 = require("./features/tool-palette/di.config");
-exports.paletteModule = di_config_10.default;
-var di_config_11 = require("./features/validation/di.config");
-exports.validationModule = di_config_11.default;
+var di_config_5 = require("./features/layout/di.config");
+exports.layoutCommandsModule = di_config_5.default;
+var di_config_6 = require("./features/mouse-tool/di.config");
+exports.glspMouseToolModule = di_config_6.default;
+var di_config_7 = require("./features/request-response/di.config");
+exports.requestResponseModule = di_config_7.default;
+var di_config_8 = require("./features/save/di.config");
+exports.saveModule = di_config_8.default;
+var di_config_9 = require("./features/select/di.config");
+exports.glspSelectModule = di_config_9.default;
+var di_config_10 = require("./features/tool-feedback/di.config");
+exports.toolFeedbackModule = di_config_10.default;
+var di_config_11 = require("./features/tool-palette/di.config");
+exports.paletteModule = di_config_11.default;
+var di_config_12 = require("./features/validation/di.config");
+exports.validationModule = di_config_12.default;
 __export(require("sprotty/lib"));
 __export(require("./base/edit-config/edit-config"));
+__export(require("./model-source/websocket-diagram-server"));
 __export(require("./base/model/update-model-command"));
 __export(require("./base/tool-manager/tool-manager-action-handler"));
+__export(require("./base/views/viewer-options"));
 __export(require("./features/change-bounds/model"));
@@ -55,2 +59,3 @@ __export(require("./features/command-palette/action-definitions"));
 __export(require("./features/hints/type-hints-action-initializer"));
+__export(require("./features/mouse-tool/di.config"));
 __export(require("./features/operation/operation-actions"));
@@ -62,2 +67,3 @@ __export(require("./features/operation/set-operations"));
 __export(require("./features/save/save"));
+__export(require("./features/select/di.config"));
 __export(require("./features/tool-feedback/creation-tool-feedback"));
@@ -71,4 +77,3 @@ __export(require("./features/tool-feedback/model"));
 __export(require("./features/validation/validate"));
-__export(require("./features/mouse-tool/di.config"));
-__export(require("./features/select/di.config"));
+__export(require("./features/layout/layout-commands"));
 __export(require("./lib/model"));
@@ -75,0 +80,0 @@ __export(require("./types"));

lib/types.d.ts

@@ -26,3 +26,4 @@ /********************************************************************************
     MouseTool: symbol;
+    ViewerOptions: symbol;
 };
 //# sourceMappingURL=types.d.ts.map

lib/types.js

@@ -27,4 +27,5 @@ "use strict";
     SModelRootListener: Symbol.for("SModelRootListener"),
-    MouseTool: Symbol.for("MouseTool")
+    MouseTool: Symbol.for("MouseTool"),
+    ViewerOptions: Symbol.for("ViewerOptions")
 };
 //# sourceMappingURL=types.js.map

lib/utils/smodel-util.d.ts

@@ -16,6 +16,7 @@ /********************************************************************************
  ********************************************************************************/
-import { Selectable, SModelElement, SParentElement } from "sprotty/lib";
+import { BoundsAware, Selectable, SModelElement, SParentElement } from "sprotty/lib";
 import { NodeEditConfig } from "../base/edit-config/edit-config";
 export declare function getIndex(element: SModelElement): import("sprotty").SModelIndex<SModelElement>;
 export declare function forEachElement<T>(element: SModelElement, predicate: (element: SModelElement) => element is SModelElement & T, runnable: (element: SModelElement & T) => void): void;
+export declare function getMatchingElements<T>(element: SModelElement, predicate: (element: SModelElement) => element is SModelElement & T): (SModelElement & T)[];
 export declare function hasSelectedElements(element: SModelElement): boolean;
@@ -28,2 +29,4 @@ export declare function getSelectedElementCount(element: SModelElement): number;
 export declare function isContainmentAllowed(element: SModelElement, containableElementTypeId: string): element is SParentElement & NodeEditConfig;
+export declare function isNonRoutableSelectedBoundsAware(element: SModelElement): element is SelectableBoundsAware;
+export declare type SelectableBoundsAware = SModelElement & BoundsAware & Selectable;
 //# sourceMappingURL=smodel-util.d.ts.map

lib/utils/smodel-util.js

@@ -30,2 +30,3 @@ "use strict";
 var edit_config_1 = require("../base/edit-config/edit-config");
+var model_1 = require("../features/reconnect/model");
 function getIndex(element) {
@@ -41,2 +42,8 @@ return element.root.index;
 exports.forEachElement = forEachElement;
+function getMatchingElements(element, predicate) {
+    var matching = [];
+    forEachElement(element, predicate, function (item) { return matching.push(item); });
+    return matching;
+}
+exports.getMatchingElements = getMatchingElements;
 function hasSelectedElements(element) {
@@ -111,2 +118,6 @@ return getSelectedElementCount(element) > 0;
 exports.isContainmentAllowed = isContainmentAllowed;
+function isNonRoutableSelectedBoundsAware(element) {
+    return lib_1.isBoundsAware(element) && isSelected(element) && !model_1.isRoutable(element);
+}
+exports.isNonRoutableSelectedBoundsAware = isNonRoutableSelectedBoundsAware;
 //# sourceMappingURL=smodel-util.js.map

package.json

 {
   "name": "@glsp/sprotty-client",
-  "version": "0.2.0-next.03ae33a5",
+  "version": "0.2.0-next.078a5225",
   "description": "A sprotty-based client for GLSP",
@@ -5,0 +5,0 @@ "license": "(EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0)",

src/base/di.config.ts

@@ -22,4 +22,5 @@ /********************************************************************************
 import { GLSP_TYPES } from "../types";
-import { FeedbackAwareUpdateModelCommand } from "./model/update-model-command";
+import { FeedbackAwareUpdateModelCommand, SetModelActionHandler } from "./model/update-model-command";
 import { createToolFactory, ToolManagerActionHandler } from "./tool-manager/tool-manager-action-handler";
+import { defaultGLSPViewerOptions, GLSPViewerOptions } from "./views/viewer-options";
 
@@ -33,4 +34,13 @@ const defaultGLSPModule = new ContainerModule((bind, unbind, isBound, rebind) => {
     configureCommand({ bind, isBound }, FeedbackAwareUpdateModelCommand);
+    bind(TYPES.IActionHandlerInitializer).to(SetModelActionHandler);
+
+
+    bind<GLSPViewerOptions>(GLSP_TYPES.ViewerOptions).toConstantValue(defaultGLSPViewerOptions());
+    if (isBound(TYPES.ViewerOptions)) {
+        rebind(TYPES.ViewerOptions).toService(GLSP_TYPES.ViewerOptions);
+    } else {
+        bind(TYPES.ViewerOptions).toService(GLSP_TYPES.ViewerOptions);
+    }
 });
 
 export default defaultGLSPModule;

src/base/model/update-model-command.ts

@@ -18,2 +18,3 @@ /********************************************************************************
 import {
+    Action,
     ActionHandlerRegistry,
@@ -25,2 +26,4 @@ Command,
     ILogger,
+    SetModelAction,
+    SetModelCommand,
     SModelRoot,
@@ -34,4 +37,21 @@ TYPES
 import { GLSP_TYPES } from "../../types";
+import { SelfInitializingActionHandler } from "../tool-manager/tool-manager-action-handler";
 
+/* ActionHandler that transforms a SetModelAction into an (feedback-aware) UpdateModelAction. This can be done because in sprotty
+*  UpdateModel behaves the same as SetModel if no model is present yet.*/
+export class SetModelActionHandler extends SelfInitializingActionHandler {
+    handle(action: Action): Action | void {
+        if (isSetModelAction(action)) {
+            return new UpdateModelAction(action.newRoot, false);
+        }
+    }
 
+    handledActionKinds = [SetModelCommand.KIND];
+}
+
+export function isSetModelAction(action: Action): action is SetModelAction {
+    return action !== undefined && (action.kind === SetModelCommand.KIND)
+        && (<SetModelAction>action).newRoot !== undefined;
+}
+
 export interface SModelRootListener {
@@ -38,0 +58,0 @@ modelRootChanged(root: Readonly<SModelRoot>): void

src/features/tool-feedback/change-bounds-tool-feedback.ts

@@ -20,2 +20,3 @@ /********************************************************************************
     Action,
+    Bounds,
     CommandExecutionContext,
@@ -25,2 +26,3 @@ CommandResult,
     findParentByFeature,
+    includes,
     isMoveable,
@@ -37,4 +39,7 @@ isSelectable,
 
+import { GLSPViewerOptions } from "../../base/views/viewer-options";
 import { isNotUndefined } from "../../utils/smodel-util";
+import { getAbsolutePosition } from "../../utils/viewpoint-util";
 import { addResizeHandles, isResizeable, removeResizeHandles } from "../change-bounds/model";
+import { ApplyCursorCSSFeedbackAction, CursorCSS } from "./cursor-feedback";
 import { FeedbackCommand } from "./model";
@@ -99,3 +104,4 @@
     lastDragPosition: Point | undefined;
-
+    hasCollided = false;
+    constructor(protected glspViewerOptions: GLSPViewerOptions) { super(); }
     mouseDown(target: SModelElement, event: MouseEvent): Action[] {
@@ -114,2 +120,37 @@ if (event.button === 0) {
 
+
+
+
+    /**
+    * Used to return the collision target(s) or the collision chain in case of multiple selected elements
+    */
+    getCollisionChain(target: SModelElement, element: SModelElement, dx: number, dy: number, collisionChain: SModelElement[]): SModelElement[] {
+        if (isMoveable(element) && isResizeable(element)) {
+            target.root.index.all()
+                .filter(candidate => isSelectable(candidate) && element.id !== candidate.id && collisionChain.indexOf(candidate) < 0)
+                .forEach(candidate => {
+                    if (isMoveable(element) && isMoveable(candidate)) {
+                        if (isResizeable(element) && isResizeable(candidate)) {
+                            const futureBounds: Bounds = {
+                                x: element.position.x + dx,
+                                y: element.position.y + dy,
+                                width: element.size.width,
+                                height: element.size.height
+                            };
+                            if (isOverlappingBounds(futureBounds, candidate.bounds) && !isOverlappingBounds(element.bounds, candidate.bounds)) {
+                                collisionChain.push(candidate);
+                                if (candidate.selected) {
+                                    // Check what the selected candidate will collide with and add it to the chain
+                                    collisionChain.push.apply(collisionChain, this.getCollisionChain(target, candidate, dx, dy, collisionChain));
+
+                                }
+                            }
+                        }
+                    }
+                });
+        }
+
+        return collisionChain;
+    }
+
     mouseMove(target: SModelElement, event: MouseEvent): Action[] {
@@ -123,9 +164,39 @@ const result: Action[] = [];
             const zoom = viewport ? viewport.zoom : 1;
+            const mousePoint: Point = getAbsolutePosition(target, event);
             const dx = (event.pageX - this.lastDragPosition.x) / zoom;
             const dy = (event.pageY - this.lastDragPosition.y) / zoom;
             const nodeMoves: ElementMove[] = [];
+            let willCollide: boolean = false;
+            let mouseOverElement: boolean = false;
+            const collisionOccured: boolean = false;
+
             target.root.index.all()
                 .filter(element => isSelectable(element) && element.selected)
                 .forEach(element => {
-                    if (isMoveable(element)) {
+                    if (isMoveable(element) && isResizeable(element)) {
+                        // If noElementOverlap Option is set perform collision detection
+                        if (this.glspViewerOptions.noElementOverlap) {
+                            // After collision the mouse is back inside the element => change cursor back to default
+                            if (this.hasCollided && includes(element.bounds, mousePoint)) {
+                                mouseOverElement = true;
+                                result.push(new ApplyCursorCSSFeedbackAction(CursorCSS.DEFAULT));
+                            }
+                            // Get only the valid, non-slected collision targets to avoid in-selection collisions
+                            const collisionTargets: SModelElement[] = this.getCollisionChain(target, element, dx, dy, [])
+                                .filter(collidingElement => isSelectable(collidingElement) && !collidingElement.selected);
+
+                            if (collisionTargets.length > 0) {
+                                collisionTargets.forEach(collisionTarget => {
+                                    if (isResizeable(collisionTarget)) {
+                                        willCollide = true;
+                                        this.hasCollided = true;
+                                        result.push(new ApplyCursorCSSFeedbackAction(CursorCSS.OVERLAP_FORBIDDEN));
+                                    }
+                                });
+                            }
+                        }
+                    }
+                    if (isMoveable(element) && !collisionOccured && ((!willCollide && !this.hasCollided) ||
+                        (this.hasCollided && !willCollide && mouseOverElement))) {
+                        this.hasCollided = false;
                         nodeMoves.push({
@@ -145,5 +216,7 @@ elementId: element.id,
             this.lastDragPosition = { x: event.pageX, y: event.pageY };
-            if (nodeMoves.length > 0)
+            if (nodeMoves.length > 0 && !this.hasCollided) {
                 result.push(new MoveAction(nodeMoves, false));
+            }
         }
+
         return result;
@@ -168,1 +241,18 @@ }
 }
+
+
+/**
+* Used to check if 1D boxes (lines) overlap
+*/
+export function isOverlapping1Dimension(x1: number, width1: number, x2: number, width2: number): boolean {
+    return x1 + width1 >= x2 && x2 + width2 >= x1;
+}
+
+/**
+* Used to check if 2 bounds are overlapping
+*/
+export function isOverlappingBounds(bounds1: Bounds, bounds2: Bounds): boolean {
+    return isOverlapping1Dimension(bounds1.x, bounds1.width, bounds2.x, bounds2.width) &&
+        isOverlapping1Dimension(bounds1.y, bounds1.height, bounds2.y, bounds2.height);
+
+}

src/features/tool-feedback/cursor-feedback.ts

@@ -23,2 +23,4 @@ /********************************************************************************
 export enum CursorCSS {
+    DEFAULT = 'default-mode',
+    OVERLAP_FORBIDDEN = 'overlap-forbidden-mode',
     NODE_CREATION = 'node-creation-mode',
@@ -25,0 +27,0 @@ EDGE_CREATION_SOURCE = 'edge-creation-select-source-mode',

src/features/tool-palette/tool-palette.ts

@@ -25,2 +25,3 @@ /********************************************************************************
     SetUIExtensionVisibilityAction,
+    SModelRoot,
     TYPES
@@ -46,2 +47,3 @@ } from "sprotty/lib";
     protected defaultToolsButton: HTMLElement;
+    modelRootId: string;
 
@@ -61,2 +63,6 @@
 
+    protected onBeforeShow(containerElement: HTMLElement, root: Readonly<SModelRoot>) {
+        this.modelRootId = root.id;
+    }
+
     protected createBody(): void {
@@ -116,3 +122,3 @@ const bodyDiv = document.createElement("div");
         validateActionButton.onclick = (ev: MouseEvent) => {
-            const modelIds: string[] = ["sprotty"];
+            const modelIds: string[] = [this.modelRootId];
             this.actionDispatcher.dispatch(new RequestMarkersAction(modelIds));
@@ -119,0 +125,0 @@ };

src/features/tools/change-bounds-tool.ts

@@ -23,3 +23,2 @@ /********************************************************************************
     findParentByFeature,
-    isBoundsAware,
     isViewport,
@@ -29,3 +28,2 @@ KeyTool,
     Point,
-    Selectable,
     SetBoundsAction,
@@ -38,8 +36,8 @@ SModelElement,
 
+import { GLSPViewerOptions } from "../../base/views/viewer-options";
 import { GLSP_TYPES } from "../../types";
-import { forEachElement, isSelected } from "../../utils/smodel-util";
+import { forEachElement, isNonRoutableSelectedBoundsAware, isSelected } from "../../utils/smodel-util";
 import { isBoundsAwareMoveable, isResizeable, ResizeHandleLocation, SResizeHandle } from "../change-bounds/model";
 import { IMouseTool } from "../mouse-tool/mouse-tool";
 import { ChangeBoundsOperationAction } from "../operation/operation-actions";
-import { isRoutable } from "../reconnect/model";
 import { SelectionListener, SelectionService } from "../select/selection-service";
@@ -77,7 +75,8 @@ import {
         @inject(KeyTool) protected keyTool: KeyTool,
-        @inject(GLSP_TYPES.IFeedbackActionDispatcher) protected feedbackDispatcher: IFeedbackActionDispatcher) { }
+        @inject(GLSP_TYPES.IFeedbackActionDispatcher) protected feedbackDispatcher: IFeedbackActionDispatcher,
+        @inject(GLSP_TYPES.ViewerOptions) protected opts: GLSPViewerOptions) { }
 
     enable() {
         // install feedback move mouse listener for client-side move updates
-        this.feedbackMoveMouseListener = new FeedbackMoveMouseListener();
+        this.feedbackMoveMouseListener = new FeedbackMoveMouseListener(this.opts);
         this.mouseTool.register(this.feedbackMoveMouseListener);
@@ -322,5 +321,1 @@
 }
-
-function isNonRoutableSelectedBoundsAware(element: SModelElement): element is SModelElement & BoundsAware & Selectable {
-    return isBoundsAware(element) && isSelected(element) && !isRoutable(element);
-}

src/features/tools/edge-edit-tool.ts

@@ -46,3 +46,2 @@ /********************************************************************************
 import { SelectionListener, SelectionService } from "../select/selection-service";
-import { FeedbackMoveMouseListener } from "../tool-feedback/change-bounds-tool-feedback";
 import { DrawFeedbackEdgeAction, feedbackEdgeId, RemoveFeedbackEdgeAction } from "../tool-feedback/creation-tool-feedback";
@@ -68,3 +67,3 @@ import { ApplyCursorCSSFeedbackAction, CursorCSS } from "../tool-feedback/cursor-feedback";
     protected feedbackEdgeTargetMovingListener: FeedbackEdgeTargetMovingMouseListener;
-    protected feedbackMovingListener: FeedbackMoveMouseListener;
+    protected feedbackMovingListener: FeedbackEdgeRouteMovingMouseListener;
     protected reconnectEdgeListener: ReconnectEdgeListener;
@@ -71,0 +70,0 @@

src/index.ts

@@ -20,2 +20,3 @@ /********************************************************************************
 import modelHintsModule from "./features/hints/di.config";
+import layoutCommandsModule from "./features/layout/di.config";
 import glspMouseToolModule from "./features/mouse-tool/di.config";
@@ -31,4 +32,6 @@ import requestResponseModule from "./features/request-response/di.config";
 export * from './base/edit-config/edit-config';
+export * from './model-source/websocket-diagram-server';
 export * from './base/model/update-model-command';
 export * from './base/tool-manager/tool-manager-action-handler';
+export * from './base/views/viewer-options';
 export * from './features/change-bounds/model';
@@ -41,2 +44,3 @@ export * from './features/command-palette/action-definitions';
 export * from './features/hints/type-hints-action-initializer';
+export * from './features/mouse-tool/di.config';
 export * from './features/operation/operation-actions';
@@ -48,2 +52,3 @@ export * from './features/operation/set-operations';
 export * from './features/save/save';
+export * from './features/select/di.config';
 export * from './features/tool-feedback/creation-tool-feedback';
@@ -57,4 +62,3 @@ export * from './features/tool-feedback/model';
 export * from './features/validation/validate';
-export * from './features/mouse-tool/di.config';
-export * from './features/select/di.config';
+export * from './features/layout/layout-commands';
 export * from './lib/model';
@@ -68,4 +72,5 @@ export * from './types';
     validationModule, saveModule, executeModule, paletteModule, toolFeedbackModule, defaultGLSPModule, modelHintsModule, glspCommandPaletteModule, requestResponseModule, //
-    glspSelectModule, glspMouseToolModule
+    glspSelectModule, glspMouseToolModule, layoutCommandsModule
 };
 
+

src/types.ts

@@ -25,3 +25,4 @@ /********************************************************************************
     SModelRootListener: Symbol.for("SModelRootListener"),
-    MouseTool: Symbol.for("MouseTool")
+    MouseTool: Symbol.for("MouseTool"),
+    ViewerOptions: Symbol.for("ViewerOptions")
 };

src/utils/smodel-util.ts

@@ -16,5 +16,6 @@ /********************************************************************************
  ********************************************************************************/
-import { isSelectable, Selectable, SModelElement, SParentElement } from "sprotty/lib";
+import { BoundsAware, isBoundsAware, isSelectable, Selectable, SModelElement, SParentElement } from "sprotty/lib";
 
 import { isConfigurableNode, NodeEditConfig } from "../base/edit-config/edit-config";
+import { isRoutable } from "../features/reconnect/model";
 
@@ -31,2 +32,8 @@ export function getIndex(element: SModelElement) {
 
+export function getMatchingElements<T>(element: SModelElement, predicate: (element: SModelElement) => element is SModelElement & T): (SModelElement & T)[] {
+    const matching: (SModelElement & T)[] = [];
+    forEachElement(element, predicate, item => matching.push(item));
+    return matching;
+}
+
 export function hasSelectedElements(element: SModelElement) {
@@ -79,1 +86,7 @@ return getSelectedElementCount(element) > 0;
 }
+
+export function isNonRoutableSelectedBoundsAware(element: SModelElement): element is SelectableBoundsAware {
+    return isBoundsAware(element) && isSelected(element) && !isRoutable(element);
+}
+
+export type SelectableBoundsAware = SModelElement & BoundsAware & Selectable;

No alert changes

Improved metrics

Total package byte prevSize

853657

increased by15.15%

Number of package files

321

increased by6.64%

Lines of code

13492

increased by14.26%

No dependency changes