change text editor bounding boxes to more reasonable (larger) sizes

Author: ailon

src/core/DiamondStencil.ts

@@ -35,8 +35,8 @@ export class DiamondStencil extends RectangleTextStencil {
     const angle = Math.atan(this.width !== 0 ? (this.height / 2) / (this.width / 2) : 1);
     const side = Math.sqrt(Math.pow(this.width / 2, 2) + Math.pow(this.height / 2, 2));
 
-    const rectWidth = Math.cos(angle) * side;
-    const rectHeight = Math.sin(angle) * side;
+    const rectWidth = Math.cos(angle) * side * 1.4; // increase size to a more reasonable fit
+    const rectHeight = Math.sin(angle) * side * 1.4;
 
     this.textBoundingBox.x = (this.width - rectWidth) / 2 + this.padding;
     this.textBoundingBox.y = (this.height - rectHeight) / 2 + this.padding;

src/core/EllipseStencil.ts

@@ -33,8 +33,8 @@ export class EllipseStencil extends RectangleTextStencil {
   protected setTextBoundingBox() {
     super.setTextBoundingBox();
 
-    const rectWidth = this.width / 2 * Math.sqrt(2);
-    const rectHeight = this.height / 2 * Math.sqrt(2);
+    const rectWidth = this.width / 2 * Math.sqrt(2) * 1.4;
+    const rectHeight = this.height / 2 * Math.sqrt(2) * 1.4;
 
     this.textBoundingBox.x = (this.width - rectWidth) / 2 + this.padding;
     this.textBoundingBox.y = (this.height - rectHeight) / 2 + this.padding;

src/core/TextStencil.ts

@@ -93,7 +93,7 @@ export class TextStencil extends StencilBase {
   /**
    * Text padding from the bounding box.
    */
-  protected padding = 5;
+  protected padding = 2;
 
   /**
    * Text's bounding box where text should fit and/or be anchored to.

src/stencilsets/flowchart/stencils/IOStencil.ts

@@ -30,7 +30,7 @@ export class IOStencil extends RectangleTextStencil {
   protected setTextBoundingBox() {
     super.setTextBoundingBox();
 
-    const rectWidth = this.width * 0.6;
+    const rectWidth = this.width * 0.8;
     const rectHeight = this.height;
 
     this.textBoundingBox.x = (this.width - rectWidth) / 2 + this.padding;

src/stencilsets/flowchart/stencils/TerminalStencil.ts

@@ -31,16 +31,4 @@ export class TerminalStencil extends RectangleTextStencil {
 
     this.disablePorts('bottomleft', 'topleft', 'bottomright', 'topright');
   }
-
-  protected setTextBoundingBox() {
-    super.setTextBoundingBox();
-
-    const rectWidth = this.width - this.height;
-    const rectHeight = this.height;
-
-    this.textBoundingBox.x = (this.width - rectWidth) / 2 + this.padding;
-    this.textBoundingBox.y = (this.height - rectHeight) / 2 + this.padding;
-    this.textBoundingBox.width = rectWidth - this.padding * 2;
-    this.textBoundingBox.height = rectHeight - this.padding * 2;
-  }
 }

test/manual/index.ts

@@ -174,8 +174,8 @@ export class Experiments {
       console.log(`editor connector enter ${(<ConnectorEditorEventData>ev.detail).connectorEditor.isSelected}`);
     });
 
-    this.editor.stencilEditorSet = orgchartStencilEditorSet;
-    // this.editor.stencilEditorSet = basicStencilEditorSet;
+    // this.editor.stencilEditorSet = orgchartStencilEditorSet;
+    this.editor.stencilEditorSet = basicStencilEditorSet;
     // this.editor.stencilEditorSet = flowchartStencilEditorSet;
     // this.editor.stencilEditorSet = mindMapStencilEditorSet;
     // this.editor.stencilEditorSet = networkStencilEditorSet;