implemented multiple properties view

editor-core/src/main/webapp/app/core/editorCore/controller/SceneController.ts

@@ -294,6 +294,7 @@ export class SceneController {
                 }
                 node.completeResize();
                 cellView.unhighlight(cellView.model.id);
+
             }
         }
     }

editor-core/src/main/webapp/app/core/editorCore/model/DefaultDiagramNode.ts

@@ -9,7 +9,7 @@ class ImageWithPorts extends joint.shapes.basic.Generic {
     constructor(portsModelInterface: joint.shapes.basic.PortsModelInterface) {
         super(portsModelInterface);
 
-        this.set("markup", '<g class="rotatable"><g class="scalable"><rect class ="outer"/><image/></g><text/><g class="inPorts"/><g class="outPorts"/></g>')
+        this.set("markup", '<g class="rotatable"><g class="scalable"><rect class ="outer"/><image/></g><text/><g class="inPorts"/><g class="outPorts"/></g>');
         this.set("portMarkup", '<g class="port<%= id %>"><circle/><text/></g>')
     }
 
@@ -32,19 +32,18 @@ class ImageWithPorts extends joint.shapes.basic.Generic {
 
         return attrs;
     }
-};
-
+}
 export class DefaultDiagramNode implements DiagramNode {
-
     private logicalId: string;
     private jointObject: ImageWithPorts;
     private name: string;
     private type: string;
     private constPropertiesPack: PropertiesPack;
     private changeableProperties: Map<String, Property>;
     private imagePath: string;
-    private propertyEditElement: PropertyEditElement;
+    private propertyEditElements: Map<String, PropertyEditElement>;
     private parentNode: DiagramContainer;
+    private graph : joint.dia.Graph;
 
     private resizeParameters = {
         isTopResizing: false,
@@ -63,6 +62,11 @@ export class DefaultDiagramNode implements DiagramNode {
         height: 0,
     };
 
+    private lastPointermoveCursor = {
+        x: 0,
+        y: 0,
+    };
+
     constructor(name: string, type: string, x: number, y: number, width: number, height: number,
                 properties: Map<String, Property>, imagePath: string, id?: string,
                 notDefaultConstProperties?: PropertiesPack) {
@@ -94,25 +98,26 @@ export class DefaultDiagramNode implements DiagramNode {
             jQuery.extend(jointObjectAttributes, {id: id});
         }
 
+        console.log("default diagram node constructor");
+        this.propertyEditElements = new Map();
         this.jointObject = new ImageWithPorts(jointObjectAttributes);
         this.changeableProperties = properties;
         this.imagePath = imagePath;
         this.parentNode = null;
     }
 
     pointermove(cellView, evt, x, y): void {
+        console.log("Default diagram node pointer move with x : " + x + " and y : " + y);
         cellView.options.interactive = true;
-        var bbox = cellView.getBBox();
-        var newX = bbox.x + (<number> (bbox.width - 50)/2);
-        var newY = bbox.y + bbox.height - 50;
-        this.propertyEditElement.setPosition(newX, newY);
+        var diffX = x - this.lastMousePosition.x;
+        var diffY = y - this.lastMousePosition.y;
+        this.lastPointermoveCursor.x = this.getX();
+        this.lastPointermoveCursor.y = this.getY();
+        console.log("Diagram pos in pointermove : " + this.getX() + ", " + this.getY());
 
-        if (this.resizeParameters.isBottomResizing || this.resizeParameters.isRightResizing)
-        {
+        if (this.resizeParameters.isBottomResizing || this.resizeParameters.isRightResizing) {
             cellView.options.interactive = false;
             var model = <joint.dia.Element> cellView.model;
-            var diffX = x - this.lastMousePosition.x;
-            var diffY = y - this.lastMousePosition.y;
             this.lastMousePosition.x = x;
             this.lastMousePosition.y = y;
 
@@ -130,17 +135,44 @@ export class DefaultDiagramNode implements DiagramNode {
         }
     }
 
-    initPropertyEditElements(zoom: number): void {
+    initPropertyEditElements(zoom: number, graph: joint.dia.Graph): void {
+        this.graph = graph;
         var parentPosition = this.getJointObjectPagePosition(zoom);
-        this.propertyEditElement = new PropertyEditElement(this.logicalId, this.jointObject.id,
-            this.changeableProperties);
-        var propertyEditElementX = parentPosition.x + (<number> (this.boundingBox.width - 50)/2);
-        var propertyEditElementY = parentPosition.y + this.boundingBox.height - 50;
-        this.propertyEditElement.setPosition(propertyEditElementX, propertyEditElementY);
+        var propertyEditElementX = parentPosition.x + (<number> (this.boundingBox.width - 50));
+        var propertyEditElementY = parentPosition.y + this.boundingBox.height;
+        var delta = PropertyEditElement.fontSize;
+
+        console.log("Init edit elements");
+
+        for (var propertyKey in this.changeableProperties) {
+            var property = this.changeableProperties[propertyKey];
+            if (property.type === "string") {
+                console.log("Init of property with name " + property.name + " and value " + property.value);
+                let x = propertyEditElementX;
+                let y = propertyEditElementY;
+
+                let propertyEditElement = new PropertyEditElement(x, y, property, graph);
+                propertyEditElementY += delta;
+
+
+                this.propertyEditElements[propertyKey] = propertyEditElement;
+            }
+        }
+        console.log("End of init edit elements");
+    }
+
+    getTextProperties() : joint.shapes.basic.Text[] {
+        var textObjects = [];
+
+        for (var propertyKey in this.propertyEditElements) {
+            textObjects.push(this.propertyEditElements[propertyKey].getTextObject());
+        }
+
+        return textObjects;
     }
 
-    getPropertyEditElement(): PropertyEditElement {
-        return this.propertyEditElement;
+    getPropertyEditElements(): Map<String, PropertyEditElement> {
+        return this.propertyEditElements;
     }
 
     getLogicalId(): string {
@@ -171,23 +203,27 @@ export class DefaultDiagramNode implements DiagramNode {
         return String(this.boundingBox.width) + ", " + String(this.boundingBox.height);
     }
 
+    changeTextPosition() : void {
+        var dx =  this.getX() - this.lastPointermoveCursor.x;
+        var dy =  this.getY() - this.lastPointermoveCursor.y;
+        console.log("Diagram pos in changeTextPosition : " + this.getX() + ", " + this.getY());
+        //console.log("Last cursor was at " + this.lastPointermoveCursor.x + ", " + this.lastPointermoveCursor.y);
+        console.log("Change position of text. diffX : " + dx + " diffY : " + dy);
+
+        if (dx !== 0 || dy !== 0) {
+            for (var propertyKey in this.propertyEditElements) {
+                this.propertyEditElements[propertyKey].setRelativePosition(dx, dy);
+            }
+        }
+    }
+
     setPosition(x: number, y: number, zoom: number, cellView : joint.dia.CellView): void {
         this.jointObject.position(x, y);
-        // var position = this.getJointObjectPagePosition(zoom);
-        // this.propertyEditElement.setPosition(position.x, position.y);
-        var bbox = cellView.getBBox();
-        var newX = bbox.x + (<number> (bbox.width - 50)/2);
-        var newY = bbox.y + bbox.height - 50;
-        this.propertyEditElement.setPosition(newX, newY);
     }
 
     setSize(width: number, height: number, cellView : joint.dia.CellView): void {
         var model = <joint.dia.Element> cellView.model;
         model.resize(width - 2, height);
-        var bbox = cellView.getBBox();
-        var newX = bbox.x + (<number> (bbox.width - 50)/2);
-        var newY = bbox.y + bbox.height - 50;
-        this.propertyEditElement.setPosition(newX, newY);
     }
 
     setParentNode(parent: DiagramContainer): void {
@@ -212,8 +248,10 @@ export class DefaultDiagramNode implements DiagramNode {
         return this.constPropertiesPack;
     }
 
-    setProperty(key: string, property: Property): void {
+    setProperty(key: string, property: Property ): void {
         this.changeableProperties[key] = property;
+        console.log("Set new text property : " + property.name + " : " + property.value);
+        this.propertyEditElements[key].setProperty(property, this.graph);
         var propertyChangedEvent = new CustomEvent('property-changed', {
             detail: {
                 nodeId: this.getLogicalId(),
@@ -305,5 +343,4 @@ export class DefaultDiagramNode implements DiagramNode {
         return (x <= bbox.x + bbox.width + paddingPercent && x >= bbox.x - paddingPercent &&
         y <= bbox.y + bbox.height + paddingPercent && y >= bbox.y + bbox.height - paddingPercent);
     }
-
 }

editor-core/src/main/webapp/app/core/editorCore/model/DiagramNode.ts

@@ -11,8 +11,10 @@ export interface DiagramNode extends DiagramElement {
     setPosition(x: number, y: number, zoom: number, cellView : joint.dia.CellView): void;
     setSize(width: number, height: number, cellView : joint.dia.CellView): void;
     setParentNode(parent: DiagramContainer): void;
-    getPropertyEditElement(): PropertyEditElement;
-    initPropertyEditElements(zoom: number): void;
+    getPropertyEditElements(): Map<String, PropertyEditElement>;
+    getTextProperties(): joint.shapes.basic.Text[];
+    initPropertyEditElements(zoom: number, graph: joint.dia.Graph): void;
+    changeTextPosition() : void;
     initResize(bbox, x: number, y: number, paddingPercent) : void;
     completeResize() : void;
     isResizing() : boolean;

editor-core/src/main/webapp/app/core/editorCore/model/DiagramScene.ts

@@ -3,6 +3,7 @@ import {DiagramNode} from "./DiagramNode";
 import {SubprogramNode} from "./SubprogramNode";
 import {DiagramElementListener} from "../controller/DiagramElementListener";
 import {DiagramContainer} from "./DiagramContainer";
+import {PropertyEditElement} from "./PropertyEditElement";
 export class DiagramScene extends joint.dia.Paper {
 
     private htmlId: string;
@@ -128,9 +129,9 @@ export class DiagramScene extends joint.dia.Paper {
 
         node.getJointObject().remove();
         if (node.getPropertyEditElements()) {
-            var editElements = node.getPropertyEditElements();
-            for (let i in editElements) {
-                editElements[i].getHtmlElement().remove();
+            var textElements: Map<String, PropertyEditElement> = node.getPropertyEditElements();
+            for (var propertyKey in textElements) {
+                textElements[propertyKey].getTextObject().remove();
             }
         }
         delete this.nodesMap[nodeId];
@@ -165,15 +166,14 @@ export class DiagramScene extends joint.dia.Paper {
     }
 
     public addNode(node: DiagramNode): void {
+        console.log("Diagram Scene : add node " + node);
         this.nodesMap[node.getJointObject().id] = node;
         this.graph.addCell(node.getJointObject());
-        node.initPropertyEditElements(this.zoom);
-        if (node.getPropertyEditElements()) {
-            var editElements = node.getPropertyEditElements();
-            for (let i in editElements) {
-                editElements[i].getHtmlElement().insertBefore("#" + this.getId());
-            }
-        }
+
+        node.initPropertyEditElements(this.zoom, this.graph);
+        node.getJointObject().on('change:position', function() {
+            node.changeTextPosition();
+        });
     }
 
     public setCurrentLinkType(linkType: string): void {

editor-core/src/main/webapp/app/core/editorCore/model/PropertyEditElement.ts

@@ -1,55 +1,74 @@
-import {StringUtils} from "../../../utils/StringUtils";
 import {Property} from "./Property";
+
 export class PropertyEditElement {
+    public static fontSize = 20;
 
-    private static propertyTemplate = "" +
-        "<span>{3}:</span> " +
-        "<input class='{0} property-edit-input' data-id='{1}' data-type='{2}' " +
-        "style='border: dashed 1px; padding-left: 2px; margin-bottom: 1px' value='{4}'>" +
-        "<br>";
+    private textObject: joint.shapes.basic.Text;
+    private lastX: number;
+    private lastY: number;
 
-    private static template: string = "" +
-        "<div class='property-edit-element' style='position: absolute; text-align: left; z-index: 1;'>" +
-        "   {0}" +
-        "</div>";
+    /**
+     * Creates property at specified coordinates with specified name and value.
+     * @param x x axis coordinate
+     * @param y y axis coordinate
+     * @param property property to set
+     * @param graph graph for setting text on the plane.
+     */
+    constructor(x : number, y : number, property : Property, graph : joint.dia.Graph) {
+        console.log("Property edit element constructor");
 
-    private htmlElement;
+        this.lastX = x;
+        this.lastY = y;
+        this.setProperty(property, graph);
 
-    constructor(logicalId: string, jointObjectId: string, propertyKey : string, property : Property) {
-        var propertiesHtml: string = "";
+        this.textObject.on("cell:pointermove", (cellView, event, x, y): void => {
+            this.setPosition(x, y);
+        });
+    }
 
-        propertiesHtml += StringUtils.format(PropertyEditElement.propertyTemplate,
-            propertyKey + "-" + logicalId, jointObjectId, propertyKey, property.name, property.value);
+    public getTextObject() : joint.shapes.basic.Text {
+        return this.textObject;
+    }
 
-        this.htmlElement = $(StringUtils.format(PropertyEditElement.template, propertiesHtml));
-        this.initInputSize();
-        this.initInputAutosize();
+    getX(): number {
+        return (this.textObject.get("position"))['x'];
     }
 
-    public getHtmlElement() {
-        return this.htmlElement;
+    getY(): number {
+        return (this.textObject.get("position"))['y'];
     }
 
     public setPosition(x: number, y: number): void {
-        this.htmlElement.css({ left: x - 25, top: y + 55 });
+        console.log("Setting text position with x : " + x + " and y : " + y);
+        this.textObject.position(x, y);
     }
 
-    private initInputSize(): void {
-        this.htmlElement.find('input').each(function(index) {
-                $(this).css("width", StringUtils.getInputStringSize(this));
-            }
-        );
+    public setProperty(property : Property, graph : joint.dia.Graph): void {
+        var width: number = 0.5 * (property.name.length + property.value.length) * PropertyEditElement.fontSize;
+        var height: number = PropertyEditElement.fontSize;
 
-    }
+        if (this.textObject) {
+            this.lastX = this.getX();
+            this.lastY = this.getY();
+            this.textObject.remove();
+        }
 
-    private initInputAutosize(): void {
-        this.htmlElement.find('input').on('input', function(event) {
-            $(this).trigger('autosize');
+        this.textObject = new  joint.shapes.basic.Text({
+            position: { x: this.lastX, y: this.lastY },
+            size: { width: width, height: height },
+            attrs: {
+                text: {
+                    text: property.name + " : " + property.value,
+                },
+            },
         });
 
-        this.htmlElement.find('input').on('autosize', function(event) {
-            $(this).css("width", StringUtils.getInputStringSize(this));
-        });
+        graph.addCell(this.textObject);
     }
 
+    public setRelativePosition(deltaX : number, deltaY : number): void {
+        this.lastX = this.getX() + deltaX;
+        this.lastY = this.getY() + deltaY;
+        this.setPosition(this.lastX, this.lastY);
+    }
 }