qreal · saimonsaret · Feb 23, 2017 · Feb 23, 2017 · Feb 24, 2017 · Feb 24, 2017
diff --git a/dashboard-service/src/main/webapp/resources/js/joint.js b/dashboard-service/src/main/webapp/resources/js/joint.js
diff --git a/dashboard-service/src/main/webapp/resources/types/jointjs/jointjs.d.ts b/dashboard-service/src/main/webapp/resources/types/jointjs/jointjs.d.ts
diff --git a/...s/db-diagram-service/src/main/java/com/qreal/wmp/db/diagram/model/DefaultDiagramNode.java b/...s/db-diagram-service/src/main/java/com/qreal/wmp/db/diagram/model/DefaultDiagramNode.java
@@ -30,6 +30,9 @@ public class DefaultDiagramNode implements Serializable {
     @Column(name = "type")
     private String type;
 
+    @Column(name = "parent_id")
+    private String parentId;
+
     @OneToMany(cascade = CascadeType.ALL, fetch = FetchType.EAGER, orphanRemoval = true)
     @JoinColumn(name = "node_id", referencedColumnName = "id")
     private Set<Property> properties = new HashSet<>();
@@ -55,6 +58,10 @@ public DefaultDiagramNode(TDefaultDiagramNode tDefaultDiagramNode) {
             type = tDefaultDiagramNode.getType();
         }
 
+        if (tDefaultDiagramNode.isSetParentId()) {
+            parentId = tDefaultDiagramNode.getParentId();
+        }
+
         if (tDefaultDiagramNode.isSetProperties()) {
             properties = tDefaultDiagramNode.getProperties().stream().map(Property::new).
                     collect(Collectors.toSet());
@@ -81,6 +88,10 @@ public TDefaultDiagramNode toTDefaultDiagramNode() {
             tDefaultDiagramNode.setType(type);
         }
 
+        if (parentId != null) {
+            tDefaultDiagramNode.setParentId(parentId);
+        }
+
         if (properties != null && !properties.isEmpty()) {
             tDefaultDiagramNode.setProperties(properties.stream().map(Property::toTProperty).
                     collect(Collectors.toSet()));

diff --git a/editor-core/src/main/webapp/app/core/editorCore/controller/DiagramEditorController.ts b/editor-core/src/main/webapp/app/core/editorCore/controller/DiagramEditorController.ts
@@ -118,12 +118,9 @@ export class DiagramEditorController {
 
         $.extend(this.linkPatternsMap, elementTypes.linkPatterns);
         $.extend(this.nodeTypesMap, elementTypes.blockTypes.convertToMap(), elementTypes.flowTypes.convertToMap(),
-            elementTypes.uncategorisedTypes);
+            this.elementTypes.containerTypes.convertToMap());
 
         this.diagramEditor.getScene().setLinkPatterns(this.linkPatternsMap);
-        this.paletteController.appendBlocksPalette(elementTypes.blockTypes);
-        this.paletteController.appendFlowsPalette(elementTypes.flowTypes);
-        this.paletteController.initClick(this.diagramEditor.getScene());
-        this.paletteController.initDraggable();
+        this.paletteController.init(this.diagramEditor.getScene(), elementTypes, this.nodeTypesMap);
     }
 }
diff --git a/editor-core/src/main/webapp/app/core/editorCore/controller/PaletteController.ts b/editor-core/src/main/webapp/app/core/editorCore/controller/PaletteController.ts
@@ -10,8 +10,44 @@ export class PaletteController {
     private subprogramsSelector: string = "#subprograms-navigation";
     private blocksSelector: string = "#blocks-navigation";
     private flowsSelector: string = "#flows-navigation";
+    private paper: DiagramScene;
+    private elementTypes: ElementTypes;
+    private nodesTypesMap: Map<String, NodeType>;
 
-    public initDraggable(): void {
+    public init(paper: DiagramScene, elementTypes: ElementTypes, nodesTypesMap: Map<String, NodeType>) {
+        this.paper = paper;
+        this.elementTypes = elementTypes;
+        this.nodesTypesMap = nodesTypesMap;
+        this.reload();
+    }
+
+    public reload() {
+        this.clearPaletteContent(this.blocksSelector);
+        this.clearPaletteContent(this.flowsSelector);
+
+        this.appendBlocksPalette(this.elementTypes.blockTypes);
+        this.appendBlocksPalette(this.elementTypes.containerTypes);
+        this.appendFlowsPalette(this.elementTypes.flowTypes);
+        this.initClick();
+        this.initDraggable();
+    }
+
+    public searchPaletteReload(event: Event) {
+        var searchPatterns: string[] = (<any> event.target).value.split(" ").map((str) => str.toLowerCase());
+
+        for (var name in this.nodesTypesMap) {
+            var notFound: Boolean = false;
+            for (var i in searchPatterns) {
+                notFound = name.indexOf(searchPatterns[i]) == -1;
+                if (notFound)
+                    break;
+            }
+            this.nodesTypesMap[name].setVisibility(!notFound);
+        }
+        this.reload();
+    }
+
+    private initDraggable(): void {
         $(".tree-element").draggable({
             helper: function () {
                 var clone =  $(this).find('.element-img').clone();
@@ -27,8 +63,9 @@ export class PaletteController {
         });
     }
 
-    public initClick(paper: DiagramScene): void {
-        $("[data-type='" + paper.getCurrentLinkTypeName() + "']").css("border", "2px solid #00ff00");
+    private initClick(): void {
+        $("[data-type='" + this.paper.getCurrentLinkTypeName() + "']").css("border", "2px solid #00ff00");
+        var paper: DiagramScene = this.paper;
         $(".flow-element").mousedown(function () {
             paper.setCurrentLinkType($(this).attr("data-type"));
             $(".flow-element").css("border", "");
@@ -44,35 +81,16 @@ export class PaletteController {
         this.appendPaletteContent(this.subprogramsSelector, paletteView.getContent());
     }
 
-    public appendBlocksPalette(paletteTypes: PaletteTree): void {
+    private appendBlocksPalette(paletteTypes: PaletteTree): void {
         var paletteView: BlocksPaletteView = new BlocksPaletteView(paletteTypes, "tree-element");
         this.appendPaletteContent(this.blocksSelector, paletteView.getContent());
     }
 
-    public appendFlowsPalette(paletteTypes: PaletteTree): void {
+    private appendFlowsPalette(paletteTypes: PaletteTree): void {
         var paletteView: BlocksPaletteView = new BlocksPaletteView(paletteTypes, "tree-element flow-element");
         this.appendPaletteContent(this.flowsSelector, paletteView.getContent());
     }
 
-    public searchPaletteReload(event: Event, elementTypes: ElementTypes, nodesTypesMap: Map<String, NodeType>) {
-        var searchPatterns: string[] = (<any> event.target).value.split(" ").map((str) => str.toLowerCase());
-
-        for (var name in nodesTypesMap) {
-            var notFound: Boolean = false;
-            for (var i in searchPatterns) {
-                notFound = name.indexOf(searchPatterns[i]) == -1;
-                if (notFound)
-                    break;
-            }
-            nodesTypesMap[name].setVisibility(!notFound);
-        }
-        this.clearPaletteContent(this.blocksSelector);
-        this.clearPaletteContent(this.flowsSelector);
-
-        this.appendBlocksPalette(elementTypes.blockTypes);
-        this.appendFlowsPalette(elementTypes.flowTypes);
-    }
-
     private appendPaletteContent(selector: string, content: string): void {
         $(selector).append(content);
 
@@ -84,5 +102,4 @@ export class PaletteController {
     private clearPaletteContent(selector: string): void {
         $(selector).empty();
     }
-
 }
diff --git a/editor-core/src/main/webapp/app/core/editorCore/controller/SceneController.ts b/editor-core/src/main/webapp/app/core/editorCore/controller/SceneController.ts
@@ -14,6 +14,9 @@ import {DiagramElementListener} from "./DiagramElementListener";
 import {SceneCommandFactory} from "../model/commands/SceneCommandFactory";
 import {DiagramEditorController} from "./DiagramEditorController";
 import {UndoRedoController} from "./UndoRedoController";
+import {ContainerNodeType} from "../model/ContainerNodeType";
+import {DiagramContainer} from "../model/DiagramContainer";
+import {EmbedCommand} from "../model/commands/EmbedCommand";
 export class SceneController {
 
     private diagramEditorController: DiagramEditorController;
@@ -119,8 +122,12 @@ export class SceneController {
             node = new SubprogramNode(subprogramName, type, x, y, DefaultSize.DEFAULT_NODE_WIDTH,
                 DefaultSize.DEFAULT_NODE_HEIGHT, nodeProperties, image, subprogramId);
         } else {
-            node = new DefaultDiagramNode(name, type, x, y, DefaultSize.DEFAULT_NODE_WIDTH,
-                DefaultSize.DEFAULT_NODE_HEIGHT, nodeProperties, image);
+            if (this.diagramEditorController.getNodeType(type) instanceof ContainerNodeType)
+                node = new DiagramContainer(name, type, x, y, DefaultSize.DEFAULT_NODE_WIDTH,
+                    DefaultSize.DEFAULT_NODE_HEIGHT, nodeProperties, image);
+            else
+                node = new DefaultDiagramNode(name, type, x, y, DefaultSize.DEFAULT_NODE_WIDTH,
+                    DefaultSize.DEFAULT_NODE_HEIGHT, nodeProperties, image);
         }
 
         var command: Command = new MultiCommand([this.paperCommandFactory.makeCreateNodeCommand(node),
@@ -171,7 +178,7 @@ export class SceneController {
 
     public createLinkBetweenCurrentAndEventTargetElements(event): void {
         var controller = this;
-        var elementBelow = this.getElementBelow(event, function(cell) {
+        var elementBelow = this.getElementBelow(event, function(cell: joint.dia.Element) {
             return !(cell instanceof joint.dia.Link || cell.id === controller.currentElement.getJointObject().id) && controller.rightClickFlag;
         });
         if (elementBelow) {
@@ -247,7 +254,7 @@ export class SceneController {
         this.changeCurrentElement(element);
 
         if (this.scene.getNodeById(cellView.model.id) && event.button == MouseButton.left) {
-            var node:DiagramNode = this.scene.getNodeById(cellView.model.id);
+            var node: DiagramNode = this.scene.getNodeById(cellView.model.id);
             this.lastCellMouseDownPosition.x = node.getX();
             this.lastCellMouseDownPosition.y = node.getY();
             var bbox = cellView.getBBox();
@@ -274,7 +281,7 @@ export class SceneController {
             if (node) {
                 if (node.isResizing()) {
                     var bbox = cellView.getBBox();
-                    var command : Command = this.paperCommandFactory.makeResizeCommand(
+                    let command: Command = this.paperCommandFactory.makeResizeCommand(
                         node,
                         this.lastCellMouseDownSize.width,
                         this.lastCellMouseDownSize.height,
@@ -283,15 +290,7 @@ export class SceneController {
                         cellView);
                     this.undoRedoController.addCommand(command);
                 } else {
-                    var command: Command = this.paperCommandFactory.makeMoveCommand(
-                        node,
-                        this.lastCellMouseDownPosition.x,
-                        this.lastCellMouseDownPosition.y,
-                        node.getX(),
-                        node.getY(),
-                        this.scene.getZoom(),
-                        cellView);
-                    this.undoRedoController.addCommand(command);
+                    this.moveNode(cellView, node);
                 }
                 node.completeResize();
                 cellView.unhighlight(cellView.model.id);
@@ -307,6 +306,31 @@ export class SceneController {
         }
     }
 
+    private moveNode(cellView, node: DiagramNode): void {
+        let command: MultiCommand = new MultiCommand([]);
+
+        var dependentNodes: DiagramNode[] = this.getDependentNodes(node);
+        var diffX: number = node.getX() - this.lastCellMouseDownPosition.x;
+        var diffY: number = node.getY() - this.lastCellMouseDownPosition.y;
+        dependentNodes.forEach((curNode: DiagramNode) => command.add(this.paperCommandFactory.makeMoveCommand(
+            curNode,
+            curNode.getX() - diffX,
+            curNode.getY() - diffY,
+            curNode.getX(),
+            curNode.getY(),
+            this.scene.getZoom(),
+            cellView)));
+
+        var parent: DiagramContainer = <DiagramContainer> this.scene.getNodeById(node.getJointObject().get('parent'));
+        var oldParent: DiagramContainer = (node).getParentNode();
+        if (parent !== oldParent) {
+            var embedCommand = new EmbedCommand(node, parent, oldParent);
+            embedCommand.execute();
+            command.add(embedCommand);
+        }
+        this.undoRedoController.addCommand(command);
+    }
+
     private initDropPaletteElementListener(): void {
         var controller: SceneController = this;
         var paper: DiagramScene = this.scene;
@@ -324,7 +348,7 @@ export class SceneController {
                 var type = $(ui.draggable.context).data("type");
 
                 if (paper.getCurrentLinkTypeName() == type) {
-                    var elementBelow = controller.getElementBelow(event, function(cell) {
+                    var elementBelow = controller.getElementBelow(event, function(cell: joint.dia.Element) {
                         return !(cell instanceof joint.dia.Link);
                     });
                     if (elementBelow) {
@@ -384,46 +408,84 @@ export class SceneController {
     }
 
     private removeCurrentElement(): void {
-        var removeCommands: Command[] = [];
-        removeCommands.push(this.paperCommandFactory.makeChangeCurrentElementCommand(null, this.currentElement));
-        if (this.currentElement instanceof DefaultDiagramNode) {
-            var node: DiagramNode = <DiagramNode> this.currentElement;
-            var connectedLinks: Link[] = this.scene.getConnectedLinkObjects(node);
-            connectedLinks.forEach((link: Link) => removeCommands.push(
-                this.paperCommandFactory.makeRemoveLinkCommand(link)));
-            removeCommands.push(this.paperCommandFactory.makeRemoveNodeCommand(node));
-        } else if (this.currentElement instanceof Link) {
-            removeCommands.push(this.paperCommandFactory.makeRemoveLinkCommand(<Link> this.currentElement));
+        var removedNodes: Set<DiagramNode> = new Set<DiagramNode>();
+        var removedLinks: Set<Link> = new Set<Link>();
+        var multiCommand: MultiCommand = new MultiCommand([this.paperCommandFactory.makeChangeCurrentElementCommand(null,
+            this.currentElement)]);
+
+        if (this.currentElement instanceof Link) {
+            removedLinks.add(<Link> this.currentElement);
+        } else {
+            this.getDependentNodes(<DiagramNode> this.currentElement).forEach((node: DiagramNode) => {
+                removedNodes.add(node);
+            })
         }
-        var multiCommand : Command = new MultiCommand(removeCommands);
+
+        removedNodes.forEach((node: DiagramNode) => {
+            this.scene.getConnectedLinkObjects(node).forEach((link: Link) => {
+                removedLinks.add(link);
+            });
+        });
+
+        removedLinks.forEach((link: Link) => {
+            multiCommand.add(this.paperCommandFactory.makeRemoveLinkCommand(link));
+        });
+
+        removedNodes.forEach((node: DiagramNode) => {
+            multiCommand.add(this.paperCommandFactory.makeEmbedCommand(node, null, node.getParentNode()));
+            multiCommand.add(this.paperCommandFactory.makeRemoveNodeCommand(node));
+        });
+
         this.undoRedoController.addCommand(multiCommand);
         multiCommand.execute();
     }
 
+    private getDependentNodes(node: DiagramNode): DiagramNode[] {
+        var elements: DiagramNode[] = [];
+        if (node instanceof DiagramContainer) {
+            var embeddedCells: joint.dia.Cell[] = node.getJointObject().getEmbeddedCells();
+            for (var i = 0; i < embeddedCells.length; i++) {
+                var diagramNode: DiagramNode = this.scene.getNodeById(embeddedCells[i].id);
+                if (diagramNode)
+                    elements.push(...this.getDependentNodes(diagramNode));
+            }
+        }
+        elements.push(node);
+        return elements;
+    }
+
     private initPropertyEditorListener(): void {
         var controller = this;
         $(document).on('focus', ".property-edit-element input", function() {
             controller.changeCurrentElement(controller.scene.getNodeById($(this).data("id")));
         });
     }
 
-    private getElementBelow(event: any, checker?: (cell: any) => boolean) {
+    private getElementBelow(event: any, checker?: (cell: joint.dia.Element) => boolean): joint.dia.Element {
         var diagramPaper: HTMLDivElement = <HTMLDivElement> document.getElementById(this.scene.getId());
-        return this.diagramEditorController.getGraph().get('cells').find((cell) => {
+        var chosenElement: joint.dia.Element = null;
+        var chosenWidth = -1;
+        var cells: joint.dia.Element[] = this.diagramEditorController.getGraph().get('cells');
+        cells.forEach((cell: joint.dia.Element) => {
             if (checker && !checker(cell))
                 return false;
-            var mXBegin = cell.getBBox().origin().x;
-            var mYBegin = cell.getBBox().origin().y;
-            var mXEnd = cell.getBBox().corner().x;
-            var mYEnd = cell.getBBox().corner().y;
 
-            var leftElementPos:number = (event.pageX - $(diagramPaper).offset().left + $(diagramPaper).scrollLeft()) /
+            var mXBegin = cell.getBBox().x;
+            var mYBegin = cell.getBBox().y;
+            var mXEnd = cell.getBBox().x + cell.getBBox().width;
+            var mYEnd = cell.getBBox().y + cell.getBBox().height;
+            var leftElementPos: number = (event.pageX - $(diagramPaper).offset().left + $(diagramPaper).scrollLeft()) /
                 this.scene.getZoom();
-            var topElementPos:number = (event.pageY - $(diagramPaper).offset().top + $(diagramPaper).scrollTop()) /
+            var topElementPos: number = (event.pageY - $(diagramPaper).offset().top + $(diagramPaper).scrollTop()) /
                 this.scene.getZoom();
 
-            return ((mXBegin <= leftElementPos) && (mXEnd >= leftElementPos)
-            && (mYBegin <= topElementPos) && (mYEnd >= topElementPos));
+            if ((mXBegin <= leftElementPos) && (mXEnd >= leftElementPos)
+                && (mYBegin <= topElementPos) && (mYEnd >= topElementPos)
+                && (!chosenElement || mXEnd - mXBegin < chosenWidth)) {
+                    chosenElement = cell;
+                    chosenWidth = cell.getBBox().width;
+            }
         });
+        return chosenElement;
     }
 }
diff --git a/editor-core/src/main/webapp/app/core/editorCore/controller/exporters/DiagramExporter.ts b/editor-core/src/main/webapp/app/core/editorCore/controller/exporters/DiagramExporter.ts
@@ -25,6 +25,7 @@ export class DiagramExporter {
             var nodeJSON = {
                 'logicalId': node.getLogicalId(),
                 'graphicalId': node.getJointObject().id,
+                'parent': node.getJointObject().get('parent'),
                 'type': node.getType(),
                 'logicalChildren': [],
                 'graphicalChildren': [],