@design-core/core 0.0.5 → 0.0.7

package/core/entities/arctext.js

@@ -11,7 +11,7 @@ import { Property } from '../properties/property.js';
 import { Text } from './text.js';
 
 import { DesignCore } from '../designCore.js';
-import { SnapPoint } from '../lib/snapping.js';
+import { SnapPoint } from '../lib/auxiliary/snapPoint.js';
 
 /**
  * Arc Aligned Character Class
@@ -21,18 +21,21 @@ export class ArcAlignedCharacter {
   #position;
   #angle;
   #height;
+  #width;
 
   /**
    * @param {string} character - text character
    * @param {Point} position - center mid point of character
    * @param {number} angle - in radians
    * @param {number} height - character height
+   * @param {number} width - character width
    */
-  constructor(character, position, angle, height = 1) {
+  constructor(character, position, angle, height = 1, width = 1) {
     this.#character = character;
     this.#position = position;
     this.#angle = angle;
     this.#height = height;
+    this.#width = width;
   }
 
   /**
@@ -67,6 +70,14 @@ export class ArcAlignedCharacter {
     return this.#height;
   }
 
+  /**
+   * Get width
+   * @return {number}
+   */
+  get width() {
+    return this.#width;
+  }
+
   /**
    * Get baseline point
    * @return {Point}
@@ -83,7 +94,7 @@ export class ArcAlignedCharacter {
    */
   get boundingBox() {
     const halfHeight = this.#height / 2;
-    const halfWidth = halfHeight * 0.6; // approximate width as half height
+    const halfWidth = this.#width / 2;
     const pt1 = new Point(this.position.x - halfWidth, this.position.y - halfHeight);
     const pt2 = new Point(this.position.x + halfWidth, this.position.y + halfHeight);
     return new BoundingBox(pt1, pt2);
@@ -105,53 +116,81 @@ export class ArcAlignedText extends Entity {
   constructor(data) {
     super(data);
 
-    // hide inherited properties
-    // needs to be enumerable=false to not appear in the object props
-    Object.defineProperty(this, 'lineType', {
-      enumerable: false,
-    });
-
-    Object.defineProperty(this, 'lineWidth', {
-      enumerable: false,
-    });
+    // lineType and lineWidth not applicable to arc-aligned text
+    this.properties.remove(Property.Names.LINETYPE);
+    this.properties.remove(Property.Names.LINEWIDTH);
 
     // DXF Groupcode 1 - Text String
-    this.string = (Property.loadValue([data?.string, data?.[1]], ''));
+    this.properties.add(Property.Names.STRING, {
+      type: Property.Type.STRING,
+      value: Property.loadValue([data?.string, data?.[1]], ''),
+      dxfCode: 1,
+    });
 
-    // DXF Groupcode 2 - Font name
-    // not implemented - enumerable=false to not appear in the object props
-    // get font from selected style: this.styleName.font
-    Object.defineProperty(this, 'fontName', {
+    // DXF Groupcode 2 - Font name (derived from style, not user-editable)
+    this.properties.add(Property.Names.FONTNAME, {
+      type: Property.Type.STRING,
       value: Property.loadValue([data?.fontName, data?.[2]], 'Arial'),
-      writable: true,
+      dxfCode: 2,
+      visible: false,
     });
 
     // DXF Groupcode 3
     // not implemented - always empty in acad output
 
     // DXF Groupcode 7 - Text style name
-    this.styleName = (Property.loadValue([data?.styleName, data?.[7]], 'STANDARD'));
+    this.properties.add(Property.Names.STYLENAME, {
+      type: Property.Type.LIST,
+      value: Property.loadValue([data?.styleName, data?.[7]], 'STANDARD'),
+      dxfCode: 7,
+      options: () => DesignCore.StyleManager.getItems().map((s) => ({ display: s.name, value: s.name })),
+    });
 
     // DXF Groupcode 40 - Radius
-    this.radius = Property.loadValue([data?.radius, data?.[40]], 10);
+    this.properties.add(Property.Names.RADIUS, {
+      type: Property.Type.NUMBER,
+      value: Property.loadValue([data?.radius, data?.[40]], 10),
+      dxfCode: 40,
+    });
 
     // DXF Groupcode 41 - Width Factor
-    // not implemented - enumerable=false to not appear in the object props
-    Object.defineProperty(this, 'widthFactor', {
+    this.properties.add(Property.Names.WIDTHFACTOR, {
+      type: Property.Type.NUMBER,
       value: Property.loadValue([data?.widthFactor, data?.[41]], 1),
-      writable: true,
+      dxfCode: 41,
+      visible: false,
     });
 
     // DXF Groupcode 42 - Text Height
-    this.height = Property.loadValue([data?.height, data?.[42]], 2.5);
+    this.properties.add(Property.Names.HEIGHT, {
+      type: Property.Type.NUMBER,
+      value: Property.loadValue([data?.height, data?.[42]], 2.5),
+      dxfCode: 42,
+    });
     // DXF Groupcode 43 - Character Spacing
-    this.characterSpacing = Property.loadValue([data?.characterSpacing, data?.[43]], 0.095);
+    this.properties.add(Property.Names.CHARACTERSPACING, {
+      type: Property.Type.NUMBER,
+      value: Property.loadValue([data?.characterSpacing, data?.[43]], 0.095),
+      dxfCode: 43,
+    });
     // DXF Groupcode 44 - Offset from Arc
-    this.offsetFromArc = Property.loadValue([data?.offsetFromArc, data?.[44]], 0);
+    this.properties.add(Property.Names.OFFSETFROMARC, {
+      type: Property.Type.NUMBER,
+      value: Property.loadValue([data?.offsetFromArc, data?.[44]], 0),
+      dxfCode: 44,
+    });
     // DXF Groupcode 45 - Offset from right
-    this.offsetFromRight = Property.loadValue([data?.offsetFromRight, data?.[45]], 0);
+    this.properties.add(Property.Names.OFFSETFROMRIGHT, {
+      type: Property.Type.NUMBER,
+      value: Property.loadValue([data?.offsetFromRight, data?.[45]], 0),
+      dxfCode: 45,
+    });
     // DXF Groupcode 46 - Offset from left
-    this.offsetFromLeft = Property.loadValue([data?.offsetFromLeft, data?.[46]], 0);
+    this.properties.add(Property.Names.OFFSETFROMLEFT, {
+      type: Property.Type.NUMBER,
+      value: Property.loadValue([data?.offsetFromLeft, data?.[46]], 0),
+      dxfCode: 46,
+    });
 
     // ensure points array has at least one point - the arc center
     if (!this.points.length) {
@@ -162,48 +201,67 @@ export class ArcAlignedText extends Entity {
     // DXF Groupcode 50 - Start Angle in degrees
     const startAngle = Utils.round(Property.loadValue([data?.startAngle, data?.[50]], 0));
     if (this.points[1] === undefined) {
-      this.points[1] = this.points[0].project(Utils.degrees2radians(startAngle), this.radius);
+      this.points[1] = this.points[0].project(Utils.degrees2radians(startAngle), this.getProperty(Property.Names.RADIUS));
     }
 
     // DXF Groupcode 51 - End Angle in degrees
     const endAngle = Utils.round(Property.loadValue([data?.endAngle, data?.[51]], 180));
     if (this.points[2] === undefined) {
-      this.points[2] = this.points[0].project(Utils.degrees2radians(endAngle), this.radius);
+      this.points[2] = this.points[0].project(Utils.degrees2radians(endAngle), this.getProperty(Property.Names.RADIUS));
     }
 
     // DXF Groupcode 70 - Text Direction 0 = forward, 1 = reversed
-    // not implemented - enumerable=false to not appear in the object props
-    Object.defineProperty(this, 'textReversed', {
+    this.properties.add(Property.Names.TEXTREVERSED, {
+      type: Property.Type.BOOLEAN,
       value: Property.loadValue([data?.textReversed, Boolean(parseInt(data?.[70]))], false),
-      writable: true,
+      dxfCode: 70,
+      visible: false,
     });
 
     // DXF Groupcode 71 - 1 = outward, 2 = inward
-    this.textOrientation = Property.loadValue([data?.textOrientation, data?.[71]], 1);
+    this.properties.add(Property.Names.TEXTORIENTATION, {
+      type: Property.Type.LIST,
+      value: Property.loadValue([data?.textOrientation, data?.[71]], 1),
+      dxfCode: 71,
+      options: () => [{ display: 'Outward', value: 1 }, { display: 'Inward', value: 2 }],
+    });
     // DXF Groupcode 72 - 1 = fit to arc, 2 = left align, 3 = right align, 4 = center
-    this.textAlignment = Property.loadValue([data?.textAlignment, data?.[72]], 4);
+    this.properties.add(Property.Names.TEXTALIGNMENT, {
+      type: Property.Type.LIST,
+      value: Property.loadValue([data?.textAlignment, data?.[72]], 4),
+      dxfCode: 72,
+      options: () => [{ display: 'Fit', value: 1 }, { display: 'Left', value: 2 }, { display: 'Right', value: 3 }, { display: 'Center', value: 4 }],
+    });
     // DXF Groupcode 73 - Arc Side: convex = 1, concave = 2
-    this.arcSide = Property.loadValue([data?.arcSide, data?.[73]], 1);
+    this.properties.add(Property.Names.ARCSIDE, {
+      type: Property.Type.LIST,
+      value: Property.loadValue([data?.arcSide, data?.[73]], 1),
+      dxfCode: 73,
+      options: () => [{ display: 'Convex', value: 1 }, { display: 'Concave', value: 2 }],
+    });
 
     // DXF Groupcode 74 - Bold 0 = off, 1 = on
-    // not implemented - enumerable=false to not appear in the object props
-    Object.defineProperty(this, 'bold', {
+    this.properties.add(Property.Names.BOLD, {
+      type: Property.Type.BOOLEAN,
       value: Property.loadValue([data?.bold, Boolean(parseInt(data?.[74]))], false),
-      writable: true,
+      dxfCode: 74,
+      visible: false,
     });
 
     // DXF Groupcode 75 - Italic 0 = off, 1 = on
-    // not implemented - enumerable=false to not appear in the object props
-    Object.defineProperty(this, 'italic', {
+    this.properties.add(Property.Names.ITALIC, {
+      type: Property.Type.BOOLEAN,
       value: Property.loadValue([data?.italic, Boolean(parseInt(data?.[75]))], false),
-      writable: true,
+      dxfCode: 75,
+      visible: false,
     });
 
     // DXF Groupcode 76 - Underline 0 = off, 1 = on
-    // not implemented - enumerable=false to not appear in the object props
-    Object.defineProperty(this, 'underline', {
+    this.properties.add(Property.Names.UNDERLINE, {
+      type: Property.Type.BOOLEAN,
       value: Property.loadValue([data?.underline, Boolean(parseInt(data?.[76]))], false),
-      writable: true,
+      dxfCode: 76,
+      visible: false,
     });
 
     // Not Implemented:
@@ -254,9 +312,9 @@ export class ArcAlignedText extends Entity {
 
       // Get the arc properties
       // direction: - ccw > 0, cw <= 0
-      this.radius = selectedArc.radius;
-      const startPoint = selectedArc.direction > 0 ? selectedArc.points[1] : selectedArc.points[2];
-      const endPoint = selectedArc.direction > 0 ? selectedArc.points[2] : selectedArc.points[1];
+      this.setProperty(Property.Names.RADIUS, selectedArc.getProperty(Property.Names.RADIUS));
+      const startPoint = selectedArc.getProperty(Property.Names.DIRECTION) > 0 ? selectedArc.points[1] : selectedArc.points[2];
+      const endPoint = selectedArc.getProperty(Property.Names.DIRECTION) > 0 ? selectedArc.points[2] : selectedArc.points[1];
 
       //  set the points
       this.points[0] = new Point(selectedArc.points[0].x, selectedArc.points[0].y);
@@ -265,26 +323,26 @@ export class ArcAlignedText extends Entity {
 
       // set the text style to the current style
       const currentStyle = DesignCore.StyleManager.getCstyle();
-      this.styleName = currentStyle;
+      this.setProperty(Property.Names.STYLENAME, currentStyle);
 
       // get properties from style
-      const style = DesignCore.StyleManager.getItemByName(this.styleName);
+      const style = DesignCore.StyleManager.getItemByName(this.getProperty(Property.Names.STYLENAME));
       if (style?.textHeight) {
-        this.height = style.textHeight;
+        this.setProperty(Property.Names.HEIGHT, style.textHeight);
       }
 
       // Get the font size when standard style is used
-      if (this.styleName.toUpperCase() === 'STANDARD') {
-        const op2 = new PromptOptions(Strings.Input.HEIGHT, [Input.Type.NUMBER], [], this.height);
+      if (this.getProperty(Property.Names.STYLENAME).toUpperCase() === 'STANDARD') {
+        const op2 = new PromptOptions(Strings.Input.HEIGHT, [Input.Type.NUMBER], [], this.getProperty(Property.Names.HEIGHT));
         const height = await DesignCore.Scene.inputManager.requestInput(op2);
         if (height === undefined) return;
-        this.height = height;
+        this.setProperty(Property.Names.HEIGHT, height);
       }
 
       const op4 = new PromptOptions(Strings.Input.STRING, [Input.Type.STRING, Input.Type.NUMBER]);
       const string = await DesignCore.Scene.inputManager.requestInput(op4);
       if (string === undefined) return;
-      this.string = String(string);
+      this.setProperty(Property.Names.STRING, String(string));
 
       DesignCore.Scene.inputManager.executeCommand(this);
     } catch (err) {
@@ -300,15 +358,15 @@ export class ArcAlignedText extends Entity {
       if (DesignCore.Scene.inputManager.promptOption.types.includes(Input.Type.STRING)) {
         const data = {
           points: this.points,
-          height: this.height,
+          height: this.getProperty(Property.Names.HEIGHT),
           rotation: this.rotation,
           startAngle: Utils.radians2degrees(this.startAngle()),
           endAngle: Utils.radians2degrees(this.endAngle()),
-          radius: this.radius,
+          radius: this.getProperty(Property.Names.RADIUS),
           string: DesignCore.CommandLine.command,
         };
 
-        DesignCore.Scene.tempEntities.create(this.type, data);
+        DesignCore.Scene.previewEntities.create(this.type, data);
       }
     }
   }
@@ -375,79 +433,96 @@ export class ArcAlignedText extends Entity {
     // character positions on arc
     const arcAlignedCharacters = [];
 
-    if (this.string.length === 0) {
+    const str = this.getProperty(Property.Names.STRING) ?? '';
+    const arcSide = this.getProperty(Property.Names.ARCSIDE);
+    const radius = this.getProperty(Property.Names.RADIUS);
+    const offsetFromArc = this.getProperty(Property.Names.OFFSETFROMARC);
+    const height = this.getProperty(Property.Names.HEIGHT);
+    const offsetFromRight = this.getProperty(Property.Names.OFFSETFROMRIGHT);
+    const offsetFromLeft = this.getProperty(Property.Names.OFFSETFROMLEFT);
+    const textAlignment = this.getProperty(Property.Names.TEXTALIGNMENT);
+    const textOrientation = this.getProperty(Property.Names.TEXTORIENTATION);
+    const characterSpacing = this.getProperty(Property.Names.CHARACTERSPACING);
+
+    if (str.length === 0) {
       return arcAlignedCharacters;
     }
 
     // calculate the radial distance - Arc Side: convex = 1, concave = 2
-    const radialDistance = this.arcSide === 2 ? this.radius - this.offsetFromArc - this.height * 0.5 : this.radius + this.offsetFromArc + this.height * 0.5;
-    // calculate character width
-    const charWidth = Text.getApproximateWidth(this.string[0], this.height);
-    // calculate total char width including additional spacing
-    const totalCharWidth = charWidth + this.characterSpacing;
-    // convert the linear width of a character as an angle on the arc
-    const charWidthAsAngle = this.linearToAngular(charWidth*0.5, radialDistance);
-    // get total charwidth as angle
-    let totalCharWidthAsAngle = this.linearToAngular(totalCharWidth*0.5, radialDistance);
-
-    // calculate start and end offsets
-    const startOffsetAngle = this.linearToAngular(this.offsetFromRight, radialDistance) + charWidthAsAngle * 0.5;
-    const endOffsetAngle = this.linearToAngular(this.offsetFromLeft, radialDistance) + charWidthAsAngle * 0.5;
-
-    // total arc angle
-    const totalArcAngle = Math.abs(this.endAngle() - this.startAngle()) - startOffsetAngle - endOffsetAngle;
-
-    // defined positions - Start and end angles +/- half char width
-    const startPosition = this.points[0].project(this.startAngle() + startOffsetAngle, radialDistance);
-    const endPosition = this.points[0].project(this.endAngle() - endOffsetAngle, radialDistance);
+    const radialDistance = arcSide === 2 ? radius - offsetFromArc - height * 0.5 : radius + offsetFromArc + height * 0.5;
+
+    // calculate start and end offsets using the first and last character widths of the original string
+    const firstCharWidth = Text.getApproximateWidth(str[0], height);
+    const lastCharWidth = Text.getApproximateWidth(str.at(-1), height);
+    const startOffsetAngle = this.linearToAngular(offsetFromRight, radialDistance) + this.linearToAngular(firstCharWidth * 0.5, radialDistance);
+    const endOffsetAngle = this.linearToAngular(offsetFromLeft, radialDistance) + this.linearToAngular(lastCharWidth * 0.5, radialDistance);
 
     // default to the arc end position as the string start
-    let stringStartPoint = endPosition;
+    let stringStartPoint = this.points[0].project(this.endAngle() - endOffsetAngle, radialDistance);
     // direction: - ccw > 0, cw <= 0
     let direction = 1; // default to ccw
 
-    let string = this.string.slice(); // make a copy of the string
+    let string = str.slice(); // make a copy of the string
 
     // 1 = fit to arc, 2 = left align, 3 = right align, 4 = center
-    if (this.textAlignment === 1) { // fit to arc
-      totalCharWidthAsAngle = totalArcAngle / (this.string.length - 1);
-    }
-    if (this.textAlignment === 2) { // left align
-      // default
-    }
-    if (this.textAlignment === 3) { // right align
+    if (textAlignment === 3) { // right align
       // start at the arc start position and create the text cw around the arc
-      stringStartPoint = startPosition;
+      stringStartPoint = this.points[0].project(this.startAngle() + startOffsetAngle, radialDistance);
       direction = -1;
-      string = string.split('').reverse().join('');
-    }
-    if (this.textAlignment === 4) { // center
-      const arcMidPoint = this.points[0].project(this.arcMidAngle(this.startAngle(), this.endAngle()), radialDistance);
-      stringStartPoint = arcMidPoint.rotate(this.points[0], 0.5 * totalCharWidthAsAngle * (string.length - 1));
+      string = [...string].reverse().join('');
     }
 
     // calculate the text rotation angle: 1 = outward, 2 = inward
-    const textRotationAngle = this.textOrientation === 2 ? -Math.PI*0.5 : Math.PI*0.5;
+    const textRotationAngle = textOrientation === 2 ? -Math.PI*0.5 : Math.PI*0.5;
 
-    if (this.textOrientation === 2) {
+    if (textOrientation === 2) {
       // direction = -direction;
-      string = string.split('').reverse().join('');
+      string = [...string].reverse().join('');
     }
 
     /*
     if (this.textReversed === 1) {
       // reverse the string
-      string = string.split('').reverse().join('');
+      string = [...string].reverse().join('');
       // reverse the direction
       direction = -direction;
     }
       */
 
+    // build per-character widths for the final (possibly reversed) string
+    const charWidths = [...string].map((ch) => Text.getApproximateWidth(ch, height));
+
+    // build cumulative arc angle offsets from the string start position to each character center
+    // step between adjacent centers is the average of their two half-widths plus spacing
+    const charOffsetAngles = [0];
+    if (textAlignment === 1) { // fit to arc
+      if (string.length === 1) {
+        // single character: place at arc midpoint — division by zero otherwise
+        stringStartPoint = this.points[0].project(this.arcMidAngle(this.startAngle(), this.endAngle()), radialDistance);
+      } else {
+        const totalArcAngle = Math.abs(this.endAngle() - this.startAngle()) - startOffsetAngle - endOffsetAngle;
+        const fitStep = totalArcAngle / (string.length - 1);
+        for (let i = 1; i < string.length; i++) {
+          charOffsetAngles.push(fitStep * i);
+        }
+      }
+    } else {
+      for (let i = 0; i < string.length - 1; i++) {
+        const step = (charWidths[i] + charWidths[i + 1]) / 2 + characterSpacing;
+        charOffsetAngles.push(charOffsetAngles[i] + this.linearToAngular(step * 0.5, radialDistance));
+      }
+
+      if (textAlignment === 4) { // center
+        const arcMidPoint = this.points[0].project(this.arcMidAngle(this.startAngle(), this.endAngle()), radialDistance);
+        stringStartPoint = arcMidPoint.rotate(this.points[0], charOffsetAngles.at(-1) * 0.5);
+      }
+    }
+
     // loop through string and calculate position and angle of each character
     for (let index = 0; index < string.length; index++) {
-      const charPosition = stringStartPoint.rotate(this.points[0], -totalCharWidthAsAngle*((index) * direction));
+      const charPosition = stringStartPoint.rotate(this.points[0], -charOffsetAngles[index] * direction);
       const charAngle = this.points[0].angle(charPosition) - textRotationAngle;
-      const arcChar = new ArcAlignedCharacter(string[index], charPosition, charAngle, this.height);
+      const arcChar = new ArcAlignedCharacter(string[index], charPosition, charAngle, height, charWidths[index]);
       arcAlignedCharacters.push(arcChar);
     }
 
@@ -455,63 +530,26 @@ export class ArcAlignedText extends Entity {
   }
 
   /**
-   * Draw the entity
-   * @param {Object} ctx - context
-   * @param {number} scale
+   * Return a character descriptor array for use with renderer.drawText().
+   * Coordinates are in scene space (Y-up). The renderer handles the Y-flip.
+   * @return {Array}
    */
-  draw(ctx, scale) {
-    ctx.save(); // save current context before scale and translate
-    ctx.scale(1, -1);
-
-    const style = DesignCore.StyleManager.getItemByName(this.styleName);
-
-    // Cairo
-    ctx.setFontSize(this.height);
-    ctx.selectFontFace(style?.font, null, null); // (FontName, cairo.FONT_SLANT_NORMAL, cairo.FONT_WEIGHT_NORMAL);
-
-    const ArcAlignedCharacters = this.getArcAlignedCharacters();
-
-    for (const arcAlignedChar of ArcAlignedCharacters) {
-      ctx.save(); // save current context
-      ctx.translate(arcAlignedChar.baseline.x, -arcAlignedChar.baseline.y);
-      ctx.rotate(-arcAlignedChar.angle);
-      ctx.showText(String(arcAlignedChar.character));
-
-      ctx.stroke();
-      ctx.restore(); // restore context
-
-      /*
-      // debug draw character bounding box
-      const bb = arcAlignedChar.boundingBox;
-      const center = arcAlignedChar.position;
-
-      const posOne = new Point(center.x - bb.xLength*0.5, center.y - bb.yLength*0.5).rotate(arcAlignedChar.position, arcAlignedChar.angle);
-      const posTwo = new Point(center.x + bb.xLength*0.5, center.y - bb.yLength*0.5).rotate(arcAlignedChar.position, arcAlignedChar.angle);
-      const posThree = new Point(center.x + bb.xLength*0.5, center.y + bb.yLength*0.5).rotate(arcAlignedChar.position, arcAlignedChar.angle);
-      const posFour = new Point(center.x - bb.xLength*0.5, center.y + bb.yLength*0.5).rotate(arcAlignedChar.position, arcAlignedChar.angle);
-
-      ctx.moveTo(posOne.x, -posOne.y);
-      ctx.lineTo(posTwo.x, -posTwo.y);
-      ctx.lineTo(posThree.x, -posThree.y);
-      ctx.lineTo(posFour.x, -posFour.y);
-      ctx.lineTo(posOne.x, -posOne.y);
-      ctx.stroke();
-      */
-
-      /*
-      // debug draw the arcText bounding box
-      const bb = this.boundingBox();
-      ctx.moveTo(bb.xMin, -bb.yMin);
-      ctx.lineTo(bb.xMax, -bb.yMin);
-      ctx.lineTo(bb.xMax, -bb.yMax);
-      ctx.lineTo(bb.xMin, -bb.yMax);
-      ctx.lineTo(bb.xMin, -bb.yMin);
-      ctx.stroke();
-      */
-    }
+  toCharacters() {
+    return this.getArcAlignedCharacters().map((ch) => ({
+      x: ch.baseline.x,
+      y: ch.baseline.y,
+      rotation: ch.angle,
+      char: ch.character,
+    }));
+  }
 
-    ctx.stroke();
-    ctx.restore(); // restore context before scale and translate
+  /**
+   * Draw the entity
+   * @param {Object} renderer
+   */
+  draw(renderer) {
+    const style = DesignCore.StyleManager.getItemByName(this.getProperty(Property.Names.STYLENAME));
+    renderer.drawText(this.toCharacters(), style?.font, this.getProperty(Property.Names.HEIGHT));
   }
 
   /**
@@ -519,36 +557,36 @@ export class ArcAlignedText extends Entity {
    * @param {DXFFile} file
    */
   dxf(file) {
-    const style = DesignCore.StyleManager.getItemByName(this.styleName);
+    const style = DesignCore.StyleManager.getItemByName(this.getProperty(Property.Names.STYLENAME));
 
     file.writeGroupCode('0', 'ARCALIGNEDTEXT');
-    file.writeGroupCode('5', this.handle, DXFFile.Version.R2000); // Handle
+    file.writeGroupCode('5', this.getProperty(Property.Names.HANDLE), DXFFile.Version.R2000); // Handle
     file.writeGroupCode('100', 'AcDbEntity', DXFFile.Version.R2000);
-    file.writeGroupCode('8', this.layer);
+    file.writeGroupCode('8', this.getProperty(Property.Names.LAYER));
     file.writeGroupCode('100', 'AcDbArcAlignedText', DXFFile.Version.R2000);
-    file.writeGroupCode('1', this.string);
+    file.writeGroupCode('1', this.getProperty(Property.Names.STRING));
     file.writeGroupCode('2', style?.font);
     file.writeGroupCode('3', '');
-    file.writeGroupCode('7', this.styleName); // Test style name
+    file.writeGroupCode('7', this.getProperty(Property.Names.STYLENAME)); // Test style name
     file.writeGroupCode('10', this.points[0].x); // x of arc center
     file.writeGroupCode('20', this.points[0].y); // y of arc center
     file.writeGroupCode('30', '0.0'); // z of arc center
-    file.writeGroupCode('40', this.radius);
-    file.writeGroupCode('41', this.widthFactor);
-    file.writeGroupCode('42', this.height);
-    file.writeGroupCode('43', this.characterSpacing);
-    file.writeGroupCode('44', this.offsetFromArc);
-    file.writeGroupCode('45', this.offsetFromRight);
-    file.writeGroupCode('46', this.offsetFromLeft);
+    file.writeGroupCode('40', this.getProperty(Property.Names.RADIUS));
+    file.writeGroupCode('41', this.getProperty(Property.Names.WIDTHFACTOR));
+    file.writeGroupCode('42', this.getProperty(Property.Names.HEIGHT));
+    file.writeGroupCode('43', this.getProperty(Property.Names.CHARACTERSPACING));
+    file.writeGroupCode('44', this.getProperty(Property.Names.OFFSETFROMARC));
+    file.writeGroupCode('45', this.getProperty(Property.Names.OFFSETFROMRIGHT));
+    file.writeGroupCode('46', this.getProperty(Property.Names.OFFSETFROMLEFT));
     file.writeGroupCode('50', Utils.radians2degrees(this.startAngle()));
     file.writeGroupCode('51', Utils.radians2degrees(this.endAngle()));
-    file.writeGroupCode('70', this.textReversed ? 1 : 0); // Text direction
-    file.writeGroupCode('71', this.textOrientation); // Text orientation
-    file.writeGroupCode('72', this.textAlignment); // Text alignment
-    file.writeGroupCode('73', this.arcSide); // Arc side
-    file.writeGroupCode('74', this.bold ? 1 : 0);
-    file.writeGroupCode('75', this.italic ? 1 : 0);
-    file.writeGroupCode('76', this.underline ? 1 : 0);
+    file.writeGroupCode('70', this.getProperty(Property.Names.TEXTREVERSED) ? 1 : 0); // Text direction
+    file.writeGroupCode('71', this.getProperty(Property.Names.TEXTORIENTATION)); // Text orientation
+    file.writeGroupCode('72', this.getProperty(Property.Names.TEXTALIGNMENT)); // Text alignment
+    file.writeGroupCode('73', this.getProperty(Property.Names.ARCSIDE)); // Arc side
+    file.writeGroupCode('74', this.getProperty(Property.Names.BOLD) ? 1 : 0);
+    file.writeGroupCode('75', this.getProperty(Property.Names.ITALIC) ? 1 : 0);
+    file.writeGroupCode('76', this.getProperty(Property.Names.UNDERLINE) ? 1 : 0);
     file.writeGroupCode('77', 0);
     file.writeGroupCode('78', 34);
     file.writeGroupCode('79', 0);