diff --git a/demo/src/assets/resources.js b/demo/src/assets/resources.js index 484b8b48..4aabb66b 100644 --- a/demo/src/assets/resources.js +++ b/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 { 0 and drawOption.innerHeight > 0 %} + width="{{ drawOption.innerWidth + padding * 2 }}" + height="{{ drawOption.innerHeight + padding * 2 }}" {% else %} width={{ 254 - 12 }} height={{ 68 - 6 }} {% endif %} diff --git a/src/draw/DefaultDrawer.js b/src/draw/DefaultDrawer.js index 0ce01e88..6b467986 100644 --- a/src/draw/DefaultDrawer.js +++ b/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; diff --git a/src/draw/ElkLayout.js b/src/draw/ElkLayout.js index 0f3cbda8..5a298b43 100644 --- a/src/draw/ElkLayout.js +++ b/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; }); + + } /** diff --git a/src/draw/render/ComponentRenderer.js b/src/draw/render/ComponentRenderer.js index 36ff85a9..686cc041 100644 --- a/src/draw/render/ComponentRenderer.js +++ b/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); diff --git a/src/models/ComponentDrawOption.js b/src/models/ComponentDrawOption.js index d6e7cad1..3fc37845 100644 --- a/src/models/ComponentDrawOption.js +++ b/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}