wip

demo/src/assets/resources.js

@@ -45,9 +45,9 @@ export default {
            x="0" y="0"
         {% endif %}
 
-        {% if hasWidth and hasHeight %}
-           width="{{ drawOption.width + 12 + padding * 2}}"
-           height="{{ drawOption.height + 56 + padding * 2}}"
+        {% if hasWidth and hasHeight and drawOption.innerWidth > 0 and drawOption.innerHeight > 0 %}
+           width="{{ drawOption.innerWidth + 12 + padding * 2 }}"
+           height="{{ drawOption.innerHeight + 56 + padding * 2 }}"
         {% else %}
            width="254" height="118"
         {% endif %}
@@ -77,9 +77,9 @@ export default {
         </g>
 
         <rect x="6" y ="50" fill="#9691B1" rx="4"
-          {% if hasWidth and hasHeight %}
-              width="{{ drawOption.width + padding * 2 }}"
-              height="{{ drawOption.height + padding * 2 }}"
+          {% if hasWidth and hasHeight and drawOption.innerWidth > 0 and drawOption.innerHeight > 0 %}
+              width="{{ drawOption.innerWidth + padding * 2 }}"
+              height="{{ drawOption.innerHeight + padding * 2 }}"
           {% else %}
               width={{ 254 - 12 }} height={{ 68 - 6 }}
           {% endif %}

src/draw/DefaultDrawer.js

@@ -120,6 +120,7 @@ class DefaultDrawer {
    */
   draw() {
     this.__drawingComponents();
+    this.registerComponentsDrawOption();
     this.automaticLayout();
   }
 
@@ -208,6 +209,20 @@ class DefaultDrawer {
   async arrangeComponentsPosition() {
     await this.layout.arrangeComponentsPosition();
   }
+
+  registerComponentsDrawOption() {
+    this.pluginData.components.forEach((component) => {
+      const position = this.getNodePosition(component.id);
+      const size = this.getNodeSize(component.id);
+
+      console.log(position, size);
+
+      component.drawOption.x = position.x;
+      component.drawOption.y = position.y;
+      component.drawOption.width = size.width;
+      component.drawOption.height = size.height;
+    });
+  }
 }
 
 export default DefaultDrawer;

src/draw/ElkLayout.js

@@ -171,7 +171,6 @@ class ElkLayout extends DefaultLayout {
    * @private
    */
   writeLayout(layout) {
-    console.log('test: ', layout);
     layout.forEach((elkNode) => this.writeSingleDepthLayout(elkNode));
   }
 
@@ -283,6 +282,7 @@ class ElkLayout extends DefaultLayout {
    * @private
    */
   writeSingleDepthLayout(elkNode) {
+    console.log('elkNode: ', elkNode);
     const nodes = new Map(elkNode.children
       .map((node) => [node.id, {
         x: node.x,
@@ -297,6 +297,8 @@ class ElkLayout extends DefaultLayout {
         component.drawOption.x = x;
         component.drawOption.y = y;
       });
+
+
   }
 
   /**

src/draw/render/ComponentRenderer.js

@@ -94,8 +94,8 @@ class ComponentRenderer {
 
     const { width, height } = node.select('.components').node().getBoundingClientRect();
 
-    node.datum().data.drawOption.width = width;
-    node.datum().data.drawOption.height = height;
+    node.datum().data.drawOption.innerWidth = width;
+    node.datum().data.drawOption.innerHeight = height;
 
     node.html(this.renderModel(node.datum().data));
     this.render(nodeId);

src/models/ComponentDrawOption.js

@@ -59,6 +59,18 @@ class ComponentDrawOption {
      */
     this.height = height || null;
 
+    /**
+     * True width of Component in pixel.
+     * @type {number}
+     */
+    this.innerWidth = null;
+
+    /**
+     * True height of Component in pixel.
+     * @type {number}
+     */
+    this.innerHeight = null;
+
     /**
      * True if the component needs to be resized
      * @type {boolean}