Merge pull request #81 from liamross/lr-update-textposition

Updated text node and rectangle, updated documentation to reflect
liamross · Oct 18, 2018 · ce3faac · ce3faac
2 parents 0b8a964 + d73ae1a
commit ce3faac
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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',