From d73ae1aff8e9d8c29946daf8c0f5fd2f76a56123 Mon Sep 17 00:00:00 2001
From: liamross <liamross.code@gmail.com>
Date: Wed, 17 Oct 2018 20:53:37 -0700
Subject: [PATCH] Updated text node and rectangle, updated documentation to
 reflect

---
 docs/in-depth/custom-nodes.md                          |  8 ++++++--
 .../src/components/Node/NodeAbstracts/TextNode.ts      | 10 +++++++++-
 .../src/components/Node/NodeLibrary/Rectangle.ts       |  7 +++----
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/docs/in-depth/custom-nodes.md b/docs/in-depth/custom-nodes.md
index 46531cb..2c4a6b9 100644
--- a/docs/in-depth/custom-nodes.md
+++ b/docs/in-depth/custom-nodes.md
@@ -135,6 +135,9 @@ public initialize(): void {
 
   // Add the elements to the private Node group by using the addToGroup method.
   this.addToGroup(this._text);
+
+  // This is a function specific to TextNode to update text position on change.
+  this.updateTextPosition();
 }
 ```
 
@@ -199,8 +202,9 @@ set width(width: number) {
     // Manipulate the width in the DOM.
     setSVGAttribute(this._shape, 'width', width);
 
-    // Update the position of the text to align with the new width.
-    this.updateTextPosition(width, this.props.height);
+    // Update the position of the text to align with the new width. (this is a
+    // method unique to TextNode).
+    this.updateTextPosition();
   } else {
     throw new PaperError(
       'E_NO_ELEM',
diff --git a/packages/psiagram/src/components/Node/NodeAbstracts/TextNode.ts b/packages/psiagram/src/components/Node/NodeAbstracts/TextNode.ts
index 8d0b399..ba39174 100644
--- a/packages/psiagram/src/components/Node/NodeAbstracts/TextNode.ts
+++ b/packages/psiagram/src/components/Node/NodeAbstracts/TextNode.ts
@@ -45,10 +45,18 @@ export class TextNode<P extends ITextNodeProperties> extends BaseNode<P> {
     });
     this._text.textContent = title || '';
     this.addToGroup(this._text);
+
+    this.updateTextPosition();
   }
 
-  protected updateTextPosition(width: number, height: number): void {
+  /**
+   * Updates the position of the text to keep it centered based on the width and
+   * height of the Node.
+   */
+  protected updateTextPosition(): void {
     const { fontHeight } = this.props;
+    const width = this.width;
+    const height = this.height;
 
     const fontX = width / 2;
     const fontY = (fontHeight as number) / 2 + height / 2;
diff --git a/packages/psiagram/src/components/Node/NodeLibrary/Rectangle.ts b/packages/psiagram/src/components/Node/NodeLibrary/Rectangle.ts
index 7893799..404c325 100644
--- a/packages/psiagram/src/components/Node/NodeLibrary/Rectangle.ts
+++ b/packages/psiagram/src/components/Node/NodeLibrary/Rectangle.ts
@@ -61,9 +61,8 @@ export class Rectangle<P extends IRectangleProperties> extends TextNode<P> {
     });
     this.addToGroup(this._shape);
 
+    // Super is called last so text is added on top of shape.
     super.initialize();
-
-    this.updateTextPosition(width, height);
   }
 
   /** Width get + set. */
@@ -75,7 +74,7 @@ export class Rectangle<P extends IRectangleProperties> extends TextNode<P> {
       width = roundToNearest(width, this._growthUnit, this._growthUnit);
       this.props.width = width;
       setSVGAttribute(this._shape, 'width', width);
-      this.updateTextPosition(width, this.props.height);
+      this.updateTextPosition();
     } else {
       throw new PaperError(
         'E_NO_ELEM',
@@ -95,7 +94,7 @@ export class Rectangle<P extends IRectangleProperties> extends TextNode<P> {
       height = roundToNearest(height, this._growthUnit, this._growthUnit);
       this.props.width = height;
       setSVGAttribute(this._shape, 'height', height);
-      this.updateTextPosition(this.props.width, height);
+      this.updateTextPosition();
     } else {
       throw new PaperError(
         'E_NO_ELEM',