Introduce Svgpath bounds

examples/CharacterText/bounding_box.ts

@@ -0,0 +1,29 @@
+import * as txt from "txt";
+import createHiDPICanvas from "../../lib/hidpi-canvas";
+export default function init() {
+  const canvas = createHiDPICanvas(500, 500, 2);
+  document.body.appendChild(canvas);
+  const stage = new createjs.Stage(canvas);
+
+  const charText = new txt.CharacterText({
+    text: "The fox\n jumped over...",
+    font: "raleway",
+    tracking: 20,
+    minSize: 70,
+    width: 500,
+    height: 500,
+    size: 120,
+    x: 100,
+    y: 100,
+    debug: true,
+  });
+  stage.addChild(charText);
+
+  charText.layout();
+
+  console.log(charText.getBounds());
+
+  stage.update();
+
+  return stage;
+}

examples/Graphics/bounding_box.ts

@@ -0,0 +1,31 @@
+import * as txt from "txt";
+import createHiDPICanvas from "../../lib/hidpi-canvas";
+import svgPath from "../fixtures/svg-glyph";
+
+export default function init() {
+  const canvas = createHiDPICanvas(500, 300, 2);
+  document.body.appendChild(canvas);
+  const stage = new createjs.Stage(canvas);
+
+  const shape = new createjs.Shape();
+
+  shape.graphics.beginFill("#000");
+  shape.graphics.decodeSVGPath(svgPath);
+  shape.graphics.endFill();
+  shape.y = 30;
+  stage.addChild(shape);
+
+  let boundingBox = new createjs.Rectangle();
+  boundingBox = txt.svgPathBoundingBox(svgPath);
+  const boundaryLine = new createjs.Shape();
+  boundaryLine.y = 30;
+  boundaryLine.graphics
+    .beginStroke("#dd0000")
+    .setStrokeStyle(2)
+    .setStrokeDash([15, 5])
+    .rect(boundingBox.x, boundingBox.y, boundingBox.width, boundingBox.height);
+  stage.addChild(boundaryLine);
+
+  stage.update();
+  return stage;
+}

examples/Graphics/pathGraphics.ts

@@ -1,54 +1,56 @@
 import createHiDPICanvas from "../../lib/hidpi-canvas";
+
+function createPathShape(path, strokeColor, fillColor = null) {
+  const shape = new createjs.Shape();
+
+  if (fillColor) {
+    shape.graphics.beginFill(fillColor);
+  }
+  shape.graphics
+    .setStrokeStyle(4)
+    .beginStroke(strokeColor)
+    .decodeSVGPath(path);
+
+  return shape;
+}
+
 export default function init() {
   const canvas = createHiDPICanvas(1080, 420, 1);
   document.body.appendChild(canvas);
   const stage = new createjs.Stage(canvas);
 
-  const a = new createjs.Shape();
-  a.graphics.setStrokeStyle(4);
-  a.graphics.beginStroke("#00F");
-  a.graphics.beginFill("#F00");
-  a.graphics.decodeSVGPath("M 300 200 h -150 a 150 150 0 1 0 150 -150 z");
+  const a = createPathShape(
+    "M 300 200 h -150 a 150 150 0 1 0 150 -150 z",
+    "#00F",
+    "#F00"
+  );
   stage.addChild(a);
 
-  const b = new createjs.Shape();
-  b.graphics.setStrokeStyle(4);
-  b.graphics.beginStroke("#000");
-  b.graphics.beginFill("#FF0");
-  b.graphics.decodeSVGPath("M 275 175 v -150 a 150 150 0 0 0 -150 150 z");
+  const b = createPathShape(
+    "M 275 175 v -150 a 150 150 0 0 0 -150 150 z",
+    "#000",
+    "#FF0"
+  );
+
   stage.addChild(b);
 
-  const c = new createjs.Shape();
-  c.graphics.setStrokeStyle(4);
-  c.graphics.beginStroke("#F00");
-  c.graphics.decodeSVGPath(
-    "M 600 400 l 50 -25 a25 25 -30 0 1 50 -25 l 50 -25 a25 50 -30 0 1 50 -25 l 50 -25 a25 75 -30 0 1 50 -25 l 50 -25 a 25 100 -30 0 1 50 -25 l50 -25"
+  const c = createPathShape(
+    "M 600 400 l 50 -25 a25 25 -30 0 1 50 -25 l 50 -25 a25 50 -30 0 1 50 -25 l 50 -25 a25 75 -30 0 1 50 -25 l 50 -25 a 25 100 -30 0 1 50 -25 l50 -25",
+    "#F00"
   );
   stage.addChild(c);
 
-  let d = new createjs.Shape();
-  d.graphics.setStrokeStyle(4);
-  d.graphics.beginStroke("#F00");
-  d.graphics.decodeSVGPath("M 600,75 a100,50 0 0,0 100,50");
+  const d = createPathShape("M 600,75 a100,50 0 0,0 100,50", "#F00");
   stage.addChild(d);
 
-  d = new createjs.Shape();
-  d.graphics.setStrokeStyle(4);
-  d.graphics.beginStroke("#0F0");
-  d.graphics.decodeSVGPath("M 600,75 a100,50 0 0,1 100,50");
-  stage.addChild(d);
+  const e = createPathShape("M 600,75 a100,50 0 0,1 100,50", "#0F0");
+  stage.addChild(e);
 
-  d = new createjs.Shape();
-  d.graphics.setStrokeStyle(4);
-  d.graphics.beginStroke("#00F");
-  d.graphics.decodeSVGPath("M 600,75 a100,50 0 1,0 100,50");
-  stage.addChild(d);
+  const f = createPathShape("M 600,75 a100,50 0 1,0 100,50", "#00F");
+  stage.addChild(f);
 
-  d = new createjs.Shape();
-  d.graphics.setStrokeStyle(4);
-  d.graphics.beginStroke("#F0F");
-  d.graphics.decodeSVGPath("M 600,75 a100,50 0 1,1 100,50");
-  stage.addChild(d);
+  const g = createPathShape("M 600,75 a100,50 0 1,1 100,50", "#F0F");
+  stage.addChild(g);
 
   stage.update();
   return stage;

examples/character-text.ts

@@ -4,6 +4,7 @@ import autosize_expand from "./CharacterText/autosize_expand";
 import autosize_reduce from "./CharacterText/autosize_reduce";
 import autosize_reduce_expand from "./CharacterText/autosize_reduce_expand";
 import autosize_reduce_layout from "./CharacterText/autosize_reduce_layout";
+import bounding_box from "./CharacterText/bounding_box";
 import cache from "./CharacterText/cache";
 import character_case from "./CharacterText/case";
 import child_events from "./CharacterText/child_events";
@@ -64,6 +65,7 @@ export const visual = {
 
 export const nonVisual = {
   accessibility,
+  bounding_box,
   cache,
   complete,
   child_events,

examples/graphics.ts

@@ -1,5 +1,16 @@
 import pathGraphics from "./Graphics/pathGraphics";
 import pathGraphics2 from "./Graphics/pathGraphics2";
 import pathGraphics3 from "./Graphics/pathGraphics3";
+import bounding_box from "./Graphics/bounding_box";
 
-export default { pathGraphics, pathGraphics2, pathGraphics3 };
+export const visual = {
+  pathGraphics,
+  pathGraphics2,
+  pathGraphics3
+};
+
+export const nonVisual = {
+  bounding_box
+};
+
+export default { ...visual, ...nonVisual };

examples/index.ts

@@ -5,7 +5,7 @@ txt.FontLoader.path = "../font/";
 import { visual as CharacterTextVisual } from "./character-text";
 import { visual as TextVisual } from "./text";
 import { visual as PathTextVisual } from "./path-text";
-import Graphics from "./graphics";
+import { visual as GraphicsVisual } from "./graphics";
 
 import { nonVisual as CharacterTextNonVisual } from "./character-text";
 import { nonVisual as TextNonVisual } from "./text";
@@ -16,7 +16,7 @@ export const visualExamples = {
   CharacterText: CharacterTextVisual,
   Text: TextVisual,
   PathText: PathTextVisual,
-  Graphics
+  Graphics: GraphicsVisual
 };
 
 export const nonVisualExamples = {

index.html

@@ -250,7 +250,9 @@ <h2 class="content-subhead" id="charactertext">CharacterText</h2>
 					<li>
 						<a href="examples#CharacterText/autosize_reduce_expand">Fit - singleLine autoReduce + autoExpand</a>
 					</li>
-
+					<li>
+						<a href="examples#CharacterText/bounding_box">Bounding box</a>
+					</li>
 				</ul>
 
 			</p>
@@ -312,6 +314,9 @@ <h2 class="content-subhead" id="graphics">Graphics</h2>
 					<li>
 						<a href="examples#Graphics/pathGraphics3">Glyph Rendering (inverted)</a>
 					</li>
+					<li>
+						<a href="examples#Graphics/bounding_box">SVG Path Bounds</a>
+					</li>
 				</ul>
 
 			</p>

src/Align.ts

@@ -20,3 +20,27 @@ enum Align {
 }
 
 export default Align;
+
+export function topAligned(alignment: number): boolean {
+  return (
+    alignment === Align.TOP_LEFT ||
+    alignment === Align.TOP_CENTER ||
+    alignment === Align.TOP_RIGHT
+  );
+}
+
+export function middleAligned(alignment: number): boolean {
+  return (
+    alignment === Align.MIDDLE_LEFT ||
+    alignment === Align.MIDDLE_CENTER ||
+    alignment === Align.MIDDLE_RIGHT
+  );
+}
+
+export function bottomAligned(alignment: number): boolean {
+  return (
+    alignment === Align.BOTTOM_LEFT ||
+    alignment === Align.BOTTOM_CENTER ||
+    alignment === Align.BOTTOM_RIGHT
+  );
+}

src/Character.ts

@@ -109,16 +109,18 @@ export default class Character extends createjs.Shape {
       (this._font.ascent - this._font.descent) * this.scaleX;
     this.measuredWidth = this.scaleX * this._glyph.offset * this._font.units;
 
-    const ha = new createjs.Shape();
-    ha.graphics
+    const hitArea = new createjs.Shape();
+    hitArea.graphics
       .beginFill("#000")
       .drawRect(
         0,
         this._font.descent,
         this._glyph.offset * this._font.units,
         this._font.ascent - this._font.descent
       );
-    this.hitArea = ha;
+    this.hitArea = hitArea;
+
+    this._glyph.boundingLine();
   }
 
   setGlyph(glyph: Glyph) {

src/CharacterText.ts

@@ -1,5 +1,5 @@
 import TextContainer from "./TextContainer";
-import Align from "./Align";
+import Align, { topAligned, middleAligned, bottomAligned } from "./Align";
 import FontLoader from "./FontLoader";
 import { ConstructObj, Style } from "./Interfaces";
 import Font from "./Font";
@@ -300,7 +300,6 @@ export default class CharacterText extends TextContainer {
    */
   characterLayout(): boolean {
     //char layout
-    const len = this.text.length;
     let char: Character;
     const defaultStyle: Style = {
       size: this.size,
@@ -322,9 +321,9 @@ export default class CharacterText extends TextContainer {
     this.lines.push(currentLine);
     this.block.addChild(currentLine);
 
-    // loop over characters
-    // place into lines
-    for (let i = 0; i < len; i++) {
+    // loop over characters, and place into lines
+    for (let i = 0; i < this.text.length; i++) {
+      // apply custom character styles
       if (this.style !== null && this.style[i] !== undefined) {
         currentStyle = this.style[i];
         // make sure style contains properties needed.
@@ -350,7 +349,7 @@ export default class CharacterText extends TextContainer {
       // new line has no character
       if (this.text.charAt(i) == "\n" || this.text.charAt(i) == "\r") {
         //only if not last char
-        if (i < len - 1) {
+        if (i < this.text.length - 1) {
           if (firstLine === true) {
             vPosition = currentStyle.size;
             currentLine.measuredHeight = currentStyle.size;
@@ -578,11 +577,7 @@ export default class CharacterText extends TextContainer {
     }
 
     //TOP ALIGNED
-    if (
-      this.align === a.TOP_LEFT ||
-      this.align === a.TOP_CENTER ||
-      this.align === a.TOP_RIGHT
-    ) {
+    if (topAligned(this.align)) {
       if (fnt.top == 0) {
         this.block.y = (this.lines[0].measuredHeight * fnt.ascent) / fnt.units;
       } else {
@@ -592,22 +587,14 @@ export default class CharacterText extends TextContainer {
       }
 
       //MIDDLE ALIGNED
-    } else if (
-      this.align === a.MIDDLE_LEFT ||
-      this.align === a.MIDDLE_CENTER ||
-      this.align === a.MIDDLE_RIGHT
-    ) {
+    } else if (middleAligned(this.align)) {
       this.block.y =
         this.lines[0].measuredHeight +
         (this.height - measuredHeight) / 2 +
         (this.lines[0].measuredHeight * fnt.middle) / fnt.units;
 
       //BOTTOM ALIGNED
-    } else if (
-      this.align === a.BOTTOM_LEFT ||
-      this.align === a.BOTTOM_CENTER ||
-      this.align === a.BOTTOM_RIGHT
-    ) {
+    } else if (bottomAligned(this.align)) {
       this.block.y =
         this.height -
         this.lines[this.lines.length - 1].y +