@design-core/core 0.0.6 → 0.0.7

package/core/entities/text.js

@@ -10,7 +10,8 @@ import { Flags } from '../properties/flags.js';
 import { Property } from '../properties/property.js';
 
 import { DesignCore } from '../designCore.js';
-import { SnapPoint } from '../lib/snapping.js';
+import { SnapPoint } from '../lib/auxiliary/snapPoint.js';
+import { RubberBand } from '../lib/auxiliary/rubberBand.js';
 
 /**
  * Text Entity Class
@@ -19,35 +20,31 @@ import { SnapPoint } from '../lib/snapping.js';
 export class Text extends Entity {
   static type = 'Text';
 
+  static #charWidths = {
+    ' ': 0.28, '!': 0.28, '"': 0.35, '#': 0.56, '$': 0.56, '%': 0.89, '&': 0.67, '\'': 0.19,
+    '(': 0.33, ')': 0.33, '*': 0.39, '+': 0.58, ',': 0.28, '-': 0.33, '.': 0.28, '/': 0.31,
+    '0': 0.56, '1': 0.56, '2': 0.56, '3': 0.56, '4': 0.56, '5': 0.56, '6': 0.56, '7': 0.56,
+    '8': 0.56, '9': 0.56, ':': 0.28, ';': 0.28, '<': 0.58, '=': 0.58, '>': 0.58, '?': 0.56,
+    '@': 1.02, 'A': 0.67, 'B': 0.67, 'C': 0.72, 'D': 0.72, 'E': 0.61, 'F': 0.56, 'G': 0.78,
+    'H': 0.72, 'I': 0.28, 'J': 0.39, 'K': 0.67, 'L': 0.56, 'M': 0.83, 'N': 0.72, 'O': 0.78,
+    'P': 0.61, 'Q': 0.78, 'R': 0.67, 'S': 0.56, 'T': 0.61, 'U': 0.72, 'V': 0.67, 'W': 0.94,
+    'X': 0.67, 'Y': 0.67, 'Z': 0.61, '[': 0.28, '\\': 0.31, ']': 0.28, '^': 0.47, '_': 0.56,
+    '`': 0.33, 'a': 0.56, 'b': 0.56, 'c': 0.50, 'd': 0.56, 'e': 0.56, 'f': 0.28, 'g': 0.56,
+    'h': 0.56, 'i': 0.22, 'j': 0.22, 'k': 0.50, 'l': 0.22, 'm': 0.83, 'n': 0.56, 'o': 0.56,
+    'p': 0.56, 'q': 0.56, 'r': 0.33, 's': 0.50, 't': 0.33, 'u': 0.56, 'v': 0.50, 'w': 0.72,
+    'x': 0.50, 'y': 0.50, 'z': 0.44, '{': 0.33, '|': 0.26, '}': 0.33, '~': 0.58,
+  };
+
   /**
    * Create a Text Entity
    * @param {Array} data
    */
   constructor(data) {
     super(data);
-    this.string = '';
-    this.height = 2.5;
-    this.horizontalAlignment = 0;
-    this.verticalAlignment = 0;
-    this.styleName = 'STANDARD';
-
-    // 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,
-    });
-
-    // add rotation property with getter and setter
-    // needs to be enumerable to appear in the object props
-    Object.defineProperty(this, 'rotation', {
-      get: this.getRotation,
-      set: this.setRotation,
-      enumerable: true,
-    });
+    // Remove inherited properties not applicable to text
+    this.properties.remove(Property.Names.LINETYPE);
+    this.properties.remove(Property.Names.LINEWIDTH);
 
     // needs to be non-enumerable as to not appear in the object props
     Object.defineProperty(this, 'boundingRect', {
@@ -61,75 +58,71 @@ export class Text extends Entity {
       writable: true,
     });
 
-    // add backwards property with getter and setter
-    // needs to be enumerable to appear in the object props
-    Object.defineProperty(this, 'backwards', {
-      get: this.getBackwards,
-      set: this.setBackwards,
-      enumerable: true,
+    // DXF Groupcode 1 - Text String
+    this.properties.add(Property.Names.STRING, {
+      type: Property.Type.STRING,
+      value: Property.loadValue([data?.string, data?.[1]], ''),
+      dxfCode: 1,
     });
-
-
-    // add upsidedown property with getter and setter
-    // needs to be enumerable to appear in the object props
-    Object.defineProperty(this, 'upsideDown', {
-      get: this.getUpsideDown,
-      set: this.setUpsideDown,
-      enumerable: true,
+    // DXF Groupcode 40 - Text Height
+    this.properties.add(Property.Names.HEIGHT, {
+      type: Property.Type.NUMBER,
+      value: Property.loadValue([data?.height, data?.[40]], 2.5),
+      dxfCode: 40,
     });
-
-    if (data) {
-      // DXF Groupcode 11,21,31 - Second alignment point (optional, used for aligned, middle, or fit text)
-      if (data?.points?.length > 1) {
-        if (data.points[1].sequence == 11) {
-          this.points = [];
-          this.points.push(new Point(data.points[1].x, data.points[1].y));
-        }
-      }
-    }
-
-    // DXF Groupcode 1 - Text String
-    this.string = Property.loadValue([data?.string, data?.[1]], '');
     // DXF Groupcode 7 - Text Style Name
-    this.styleName = Property.loadValue([data?.styleName, data?.[7]], 'STANDARD');
-    // DXF Groupcode 40 - Text Height
-    this.height = Property.loadValue([data?.height, data?.[40]], 2.5);
-
-    if (data) {
-      if (data.hasOwnProperty('rotation') || data.hasOwnProperty('50')) {
-        // DXF Groupcode 50 - Text Rotation, angle in degrees
-        // if we get rotation data store this as a point[1] at an angle from point[0]
-        // this allows all the entities to be rotated by rotating the points i.e. not all entities have a rotation property
-        this.setRotation(Property.loadValue([data.rotation, data[50]], 0));
-      } else {
-        // create points[1] used to determine the text rotation
-        if (this.points.length && this.height !== undefined) {
-          this.points[1] = this.points[0].add(new Point(this.height, 0));
-        }
-      }
-    }
-
+    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 72 - Horizontal Alignment
-    // 0 = Left
-    // 1 = Center
-    // 2 = Right
-    // 3 = Aligned (if vertical alignment = 0) not supported, treated as center aligned
-    // 4 = Middle (if vertical alignment = 0) not supported, treated as center aligned
-    // 5 = Fit (if vertical alignment = 0) not supported, treated as center aligned
-    this.horizontalAlignment = Property.loadValue([data?.horizontalAlignment, data?.[72]], 0);
-
-    if (this.horizontalAlignment > 2) {
-      this.horizontalAlignment = 1; // unsupported alignment types treated as center aligned
-    }
+    const hAlign = Property.loadValue([data?.horizontalAlignment, data?.[72]], 0);
+    this.properties.add(Property.Names.HORIZONTALALIGNMENT, {
+      type: Property.Type.LIST,
+      value: hAlign > 2 ? 1 : hAlign,
+      dxfCode: 72,
+      options: () => [{ display: 'Left', value: 0 }, { display: 'Center', value: 1 }, { display: 'Right', value: 2 }],
+    });
+    // DXF Groupcode 73 - Vertical Alignment (0=Baseline; 1=Bottom; 2=Middle; 3=Top)
+    this.properties.add(Property.Names.VERTICALALIGNMENT, {
+      type: Property.Type.LIST,
+      value: Property.loadValue([data?.verticalAlignment, data?.[73]], 0),
+      dxfCode: 73,
+      options: () => [{ display: 'Baseline', value: 0 }, { display: 'Bottom', value: 1 }, { display: 'Middle', value: 2 }, { display: 'Top', value: 3 }],
+    });
+    // DXF Groupcode 71 - flags (bit-coded): 2=backward, 4=upsideDown
+    this.flags.setFlagValue(Property.loadValue([data?.flags, data?.[71]], 0));
 
-    // DXF Groupcode 73 - Vertical Alignment
-    // 0 = Baseline; 1 = Bottom; 2 = Middle; 3 = Top
-    this.verticalAlignment = Property.loadValue([data?.verticalAlignment, data?.[73]], 0);
+    // rotation: computed from angle between points[0] and points[1]
+    this.properties.add(Property.Names.ROTATION, {
+      type: Property.Type.NUMBER,
+      get: (entity) => entity.getRotation(),
+      set: (entity, angle) => entity.setRotation(angle),
+      dxfCode: 50,
+    });
+    // backwards: computed from flags bit 2
+    this.properties.add(Property.Names.BACKWARDS, {
+      type: Property.Type.BOOLEAN,
+      get: (entity) => entity.getBackwards(),
+      set: (entity, bool) => entity.setBackwards(bool),
+      dxfCode: 71,
+    });
+    // upsideDown: computed from flags bit 4
+    this.properties.add(Property.Names.UPSIDEDOWN, {
+      type: Property.Type.BOOLEAN,
+      get: (entity) => entity.getUpsideDown(),
+      set: (entity, bool) => entity.setUpsideDown(bool),
+      dxfCode: 71,
+    });
 
-    // DXF Groupcode 71 - flags (bit-coded values):
-    // 2 = Text is backward (mirrored in X).
-    // 4 = Text is upside down (mirrored in Y).
-    this.flags.setFlagValue(Property.loadValue([data?.flags, data?.[71]], 0));
+    // Named scalar rotation for internal API usage (DXF group code 50 is handled by fromDxf)
+    if (data?.rotation !== undefined && !this.points[1]) {
+      this.setRotation(data.rotation);
+    } else if (!this.points[1] && this.points.length && this.getProperty(Property.Names.HEIGHT) !== undefined) {
+      this.points[1] = this.points[0].add(new Point(this.getProperty(Property.Names.HEIGHT), 0));
+    }
   }
 
   /**
@@ -144,6 +137,34 @@ export class Text extends Entity {
     return command;
   }
 
+  /**
+   * Normalise raw DXF data before construction
+   * @param {Object} data - raw DXF group code object
+   * @return {Object} normalised data with full points array and rotation encoded as points[1]
+   *
+   * Handles:
+   * - Group codes 11,21,31: when a second alignment point with sequence 11 is present it
+   *   replaces points[0] as the text insertion point
+   * - Group code 50: rotation angle (degrees) is projected into points[1] so that all
+   *   rotation logic in the entity works uniformly through the points array
+   */
+  static fromDxf(data) {
+    // DXF group codes 11,21,31 - second alignment point overrides first when present
+    let points = data.points ? [...data.points] : [];
+    if (points.length > 1 && points[1]?.sequence == 11) {
+      points = [new Point(points[1].x, points[1].y)];
+    }
+
+    // DXF group code 50 - text rotation angle in degrees
+    // project points[1] from the insertion point to encode rotation
+    if (data[50] !== undefined && points[0]) {
+      const height = data[40] ?? data.height ?? 2.5;
+      points[1] = points[0].project(Utils.degrees2radians(data[50]), height);
+    }
+
+    return { ...data, points };
+  }
+
   /**
    * Get the approximate width of the text
    * @param {string} string - text string
@@ -153,9 +174,11 @@ export class Text extends Entity {
    * Actual width depends on the font and style used
    */
   static getApproximateWidth(string, textHeight) {
-    // Approximate width of the text based on the string length and height
-    // This is a rough estimate, as actual width depends on the font and style
-    return string.length * textHeight * 0.6; // 0.6 is an approximation factor for average character width
+    let width = 0;
+    for (const ch of string) {
+      width += (Text.#charWidths[ch] ?? 0.56) * textHeight;
+    }
+    return width;
   }
 
   /**
@@ -171,20 +194,20 @@ export class Text 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);
       }
 
-      this.backwards = style.backwards;
-      this.upsideDown = style.upsideDown;
+      this.setProperty(Property.Names.BACKWARDS, style.backwards);
+      this.setProperty(Property.Names.UPSIDEDOWN, style.upsideDown);
 
       // Get the font size when the style has a variable height (textHeight === 0)
       if (!style?.textHeight) {
-        const op2 = new PromptOptions(Strings.Input.HEIGHT, [Input.Type.NUMBER], [], this.height);
+        const op2 = new PromptOptions(Strings.Input.HEIGHT, [Input.Type.NUMBER], [], this.getProperty(Property.Names.HEIGHT));
         while (true) {
           const height = await DesignCore.Scene.inputManager.requestInput(op2);
           if (height === undefined) return;
@@ -192,7 +215,7 @@ export class Text extends Entity {
             DesignCore.Core.notify(`${this.type} - ${Strings.Error.NONZERO}`);
             continue;
           }
-          this.height = height;
+          this.setProperty(Property.Names.HEIGHT, height);
           break;
         }
       }
@@ -209,7 +232,7 @@ export class Text extends Entity {
         DesignCore.Scene.inputManager.reset();
         return;
       }
-      this.string = String(string);
+      this.setProperty(Property.Names.STRING, String(string));
 
       DesignCore.Scene.inputManager.executeCommand(this);
     } catch (err) {
@@ -225,17 +248,17 @@ export class Text extends Entity {
       if (DesignCore.Scene.inputManager.promptOption.types.includes(Input.Type.STRING)) {
         const data = {
           points: this.points,
-          height: this.height,
-          rotation: this.rotation,
-          styleName: this.styleName,
+          height: this.getProperty(Property.Names.HEIGHT),
+          rotation: this.getProperty(Property.Names.ROTATION),
+          styleName: this.getProperty(Property.Names.STYLENAME),
           string: DesignCore.CommandLine.command,
         };
 
-        DesignCore.Scene.tempEntities.create(this.type, data);
+        DesignCore.Scene.previewEntities.create(this.type, data);
       } else {
         const mousePoint = DesignCore.Mouse.pointOnScene();
         const points = [this.points.at(-1), mousePoint];
-        DesignCore.Scene.tempEntities.create('Line', { points: points });
+        DesignCore.Scene.auxiliaryEntities.add(new RubberBand(points));
       }
     }
   }
@@ -251,8 +274,8 @@ export class Text extends Entity {
       return;
     }
 
-    if (this.height > 0) {
-      this.points[1] = this.points[0].project(Utils.degrees2radians(angle), this.height);
+    if (this.getProperty(Property.Names.HEIGHT) > 0) {
+      this.points[1] = this.points[0].project(Utils.degrees2radians(angle), this.getProperty(Property.Names.HEIGHT));
     }
   }
 
@@ -327,7 +350,7 @@ export class Text extends Entity {
         5 = Fit (if vertical alignment = 0)
         */
 
-    switch (this.horizontalAlignment) {
+    switch (this.getProperty(Property.Names.HORIZONTALALIGNMENT)) {
       case 0:
         return 'left';
       case 1:
@@ -335,11 +358,11 @@ export class Text extends Entity {
       case 2:
         return 'right';
       case 3:
-        return (this.verticalAlignment === 0 ? 'aligned' : 'left'); // (if vertical alignment = 0)
+        return (this.getProperty(Property.Names.VERTICALALIGNMENT) === 0 ? 'aligned' : 'left');
       case 4:
-        return (this.verticalAlignment === 0 ? 'center' : 'left'); // (if vertical alignment = 0)
+        return (this.getProperty(Property.Names.VERTICALALIGNMENT) === 0 ? 'center' : 'left');
       case 5:
-        return (this.verticalAlignment === 0 ? 'fit' : 'left'); // (if vertical alignment = 0)
+        return (this.getProperty(Property.Names.VERTICALALIGNMENT) === 0 ? 'fit' : 'left');
       default:
         return 'left';
     }
@@ -356,7 +379,7 @@ export class Text extends Entity {
         See the Group 72 and 73 integer codes table for clarification.
         */
 
-    switch (this.verticalAlignment) {
+    switch (this.getProperty(Property.Names.VERTICALALIGNMENT)) {
       case 0:
         return 'alphabetic';
       case 1:
@@ -380,88 +403,54 @@ export class Text 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.
+   * upsideDownOffset and backwardsOffset are optional DXF-flag offsets in
+   * the local (post-rotation) text frame.
+   * @return {Array}
    */
-  draw(ctx, scale) {
-    if (this.string.length === 0) {
-      return;
-    }
-
-    ctx.save(); // save current context before scale and translate
-    ctx.scale(1, -1);
-    const corners = this.getTextFrameCorners();
-    const bottomLeft = corners[0];
-    ctx.translate(bottomLeft.x, -bottomLeft.y);
-
-    const style = DesignCore.StyleManager.getItemByName(this.styleName);
-    const rotation = Utils.degrees2radians(this.rotation);
-    ctx.rotate(-rotation);
-
-    if (this.upsideDown) {
-      const upsideDownOffset = corners[0].distance(corners[3]);
-      ctx.translate(0, -upsideDownOffset);
-      ctx.scale(1, -1);
-    }
-
-    if (this.backwards) {
-      const backwardsOffset = corners[0].distance(corners[1]);
-      ctx.translate(backwardsOffset, 0);
-      ctx.scale(-1, 1);
-    }
+  toCharacters() {
+    if (this.getProperty(Property.Names.STRING).length === 0) return [];
+    const [bottomLeft, bottomRight, /* topRight */, topLeft] = this.getTextFrameCorners();
+    return [{
+      x: bottomLeft.x,
+      y: bottomLeft.y,
+      rotation: Utils.degrees2radians(this.getRotation()),
+      char: this.getProperty(Property.Names.STRING),
+      upsideDownOffset: this.getUpsideDown() ? bottomLeft.distance(topLeft) : 0,
+      backwardsOffset: this.getBackwards() ? bottomLeft.distance(bottomRight) : 0,
+    }];
+  }
 
-    try { // HTML
-      ctx.font = this.height + 'pt ' + style.font;
-      ctx.fillText(this.string, 0, 0);
-      // TODO: find a better way to define the boundingRect
-      const metrics = ctx.measureText(String(this.string));
-      this.boundingRect = { width: metrics.width, height: this.height };
-    } catch { // Cairo
-      ctx.selectFontFace(style.font, null, null); // (FontName, cairo.FONT_SLANT_NORMAL, cairo.FONT_WEIGHT_NORMAL);
-
-      // Hack to test the text height vs bounding box height to find a scale factor to make the drawn text match the specified height.
-      // This is needed because Cairo's font size is not the same as the actual drawn text height, and can vary based on the font used.
-      // This is a rough approximation and may not be accurate for all fonts or sizes.
-      ctx.setFontSize(this.height);
-      const drawTextRect = ctx.textExtents(String(this.string));
-
-      /* GJS Cairo needs additional support for font handling
-      https://www.cairographics.org/tutorial/#L1understandingtext
-      https://www.cairographics.org/manual/cairo-cairo-scaled-font-t.html#cairo-font-extents-t
-
-      This needs to be implemented in GJS:
-      https://gitlab.gnome.org/GNOME/gjs/-/blob/master/modules/cairo-context.cpp?ref_type=heads#L773
-      https://gitlab.gnome.org/GNOME/gjs/-/blob/master/modules/cairo-context.cpp?ref_type=heads#L780
-      */
-      // Adjust the font size by the ratio of the desired height to the drawn height to get closer to the desired text height.
-      ctx.setFontSize(this.height * this.height / drawTextRect.height);
-      this.boundingRect = ctx.textExtents(String(this.string));
-
-      ctx.showText(String(this.string));
+  /**
+   * Draw the text entity
+   * @param {Object} renderer
+   */
+  draw(renderer) {
+    if (this.getProperty(Property.Names.STRING).length === 0) return;
+    const style = DesignCore.StyleManager.getItemByName(this.getProperty(Property.Names.STYLENAME));
+    // Measure with the correct font before toCharacters() so that boundingRect
+    // (used for alignment offsets) is accurate on every paint pass.
+    const measured = renderer.measureText(this.getProperty(Property.Names.STRING), style?.font, this.getProperty(Property.Names.HEIGHT));
+    if (measured?.width) {
+      this.boundingRect = { width: measured.width, height: this.getProperty(Property.Names.HEIGHT) };
     }
-
-    ctx.stroke();
-    ctx.restore(); // restore context before scale and translate
+    renderer.drawText(this.toCharacters(), style?.font, this.getProperty(Property.Names.HEIGHT));
 
     /*
     // debug draw the 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();
+    renderer.drawShape([
+      new Point(bb.xMin, bb.yMin),
+      new Point(bb.xMax, bb.yMin),
+      new Point(bb.xMax, bb.yMax),
+      new Point(bb.xMin, bb.yMax),
+      new Point(bb.xMin, bb.yMin),
+    ]);
 
     // debug draw the text frame
-    const frameCorners = this.getTextFrameCorners();
-    ctx.moveTo(frameCorners[0].x, frameCorners[0].y);
-    ctx.lineTo(frameCorners[1].x, frameCorners[1].y);
-    ctx.lineTo(frameCorners[2].x, frameCorners[2].y);
-    ctx.lineTo(frameCorners[3].x, frameCorners[3].y);
-    ctx.lineTo(frameCorners[0].x, frameCorners[0].y);
-    ctx.stroke();
+    const [fc0, fc1, fc2, fc3] = this.getTextFrameCorners();
+    renderer.drawShape([fc0, fc1, fc2, fc3, fc0]);
     */
   }
 
@@ -471,9 +460,9 @@ export class Text extends Entity {
    */
   dxf(file) {
     file.writeGroupCode('0', 'TEXT');
-    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', 'AcDbText', DXFFile.Version.R2000);
 
     const frameCorners = this.getTextFrameCorners();
@@ -483,22 +472,22 @@ export class Text extends Entity {
     file.writeGroupCode('20', bottomLeft.y);
     file.writeGroupCode('30', '0.0');
 
-    file.writeGroupCode('40', this.height);
-    file.writeGroupCode('1', this.string);
-    file.writeGroupCode('50', this.rotation);
+    file.writeGroupCode('40', this.getProperty(Property.Names.HEIGHT));
+    file.writeGroupCode('1', this.getProperty(Property.Names.STRING));
+    file.writeGroupCode('50', this.getRotation());
     // file.writeGroupCode('7', 'STANDARD'); // TEXT STYLE
     file.writeGroupCode('71', this.flags.getFlagValue()); // Text generation flags
-    file.writeGroupCode('72', this.horizontalAlignment); // Horizontal alignment
+    file.writeGroupCode('72', this.getProperty(Property.Names.HORIZONTALALIGNMENT)); // Horizontal alignment
 
-    if (this.horizontalAlignment > 0 || this.verticalAlignment > 0) {
+    if (this.getProperty(Property.Names.HORIZONTALALIGNMENT) > 0 || this.getProperty(Property.Names.VERTICALALIGNMENT) > 0) {
       file.writeGroupCode('11', this.points[0].x);
       file.writeGroupCode('21', this.points[0].y);
       file.writeGroupCode('31', '0.0');
     }
 
     file.writeGroupCode('100', 'AcDbText', DXFFile.Version.R2000);
-    if (this.verticalAlignment !== 0) {
-      file.writeGroupCode('73', this.verticalAlignment); // Vertical alignment
+    if (this.getProperty(Property.Names.VERTICALALIGNMENT) !== 0) {
+      file.writeGroupCode('73', this.getProperty(Property.Names.VERTICALALIGNMENT)); // Vertical alignment
     }
   }
 
@@ -546,7 +535,7 @@ export class Text extends Entity {
     const rect = this.getBoundingRect();
 
     let offsetX = 0;
-    switch (this.horizontalAlignment) {
+    switch (this.getProperty(Property.Names.HORIZONTALALIGNMENT)) {
       case 0: // left
         offsetX = 0;
         break;
@@ -564,7 +553,7 @@ export class Text extends Entity {
     }
 
     let offsetY = 0;
-    switch (this.verticalAlignment) {
+    switch (this.getProperty(Property.Names.VERTICALALIGNMENT)) {
       case 0: // baseline
         offsetY = 0; // see comments in draw method
         break;
@@ -586,18 +575,18 @@ export class Text extends Entity {
     const y0 = rect.y + offsetY;
 
     // compute min/max depending on backwards/upsideDown (text direction)
-    const xmin = Math.min(x0, this.backwards ? x0 - rect.width : x0 + rect.width);
-    const xmax = Math.max(x0, this.backwards ? x0 - rect.width : x0 + rect.width);
-    const ymin = Math.min(y0, this.upsideDown ? y0 - rect.height : y0 + rect.height);
-    const ymax = Math.max(y0, this.upsideDown ? y0 - rect.height : y0 + rect.height);
+    const xmin = Math.min(x0, this.getBackwards() ? x0 - rect.width : x0 + rect.width);
+    const xmax = Math.max(x0, this.getBackwards() ? x0 - rect.width : x0 + rect.width);
+    const ymin = Math.min(y0, this.getUpsideDown() ? y0 - rect.height : y0 + rect.height);
+    const ymax = Math.max(y0, this.getUpsideDown() ? y0 - rect.height : y0 + rect.height);
 
     let bottomLeft = new Point(xmin, ymin);
     let bottomRight = new Point(xmax, ymin);
     let topLeft = new Point(xmin, ymax);
     let topRight = new Point(xmax, ymax);
 
-    if (this.rotation !== 0) {
-      const angle = Utils.degrees2radians(this.rotation);
+    if (this.getRotation() !== 0) {
+      const angle = Utils.degrees2radians(this.getRotation());
       bottomLeft = bottomLeft.rotate(this.points[0], angle);
       bottomRight = bottomRight.rotate(this.points[0], angle);
       topLeft = topLeft.rotate(this.points[0], angle);

package/core/lib/auxiliary/rubberBand.js

@@ -0,0 +1,32 @@
+import { DesignCore } from '../../designCore.js';
+
+/** RubberBand Class - rubber-band indicator line drawn between two or more points */
+export class RubberBand {
+  /**
+   * Create a RubberBand
+   * @param {Point[]} points - two or more points defining the polyline
+   */
+  constructor(points) {
+    this.points = points;
+    this.lineWidth = 1.5;
+    this.dashPattern = [12, 6];
+  }
+
+  /**
+   * Draw the rubber-band line
+   * @param {Object} renderer
+   * @param {number} scale
+   */
+  draw(renderer, scale) {
+    if (this.points.length < 2) return;
+
+    const colour = DesignCore.Settings.rubberbandcolour;
+    const lineWidth = this.lineWidth / scale;
+    const scaledDash = this.dashPattern.map((x) => x / scale);
+
+    renderer.setColour(colour);
+    renderer.setLineWidth(lineWidth);
+    renderer.setDash(scaledDash, 0);
+    renderer.drawShape(this.points);
+  }
+}

package/core/lib/auxiliary/selectionWindow.js

@@ -0,0 +1,63 @@
+import { DesignCore } from '../../designCore.js';
+import { Point } from '../../entities/point.js';
+
+/** SelectionWindow Class */
+export class SelectionWindow {
+  /**
+   * Create a SelectionWindow
+   * @param {Object} data
+   */
+  constructor(data) {
+    this.colour = DesignCore.Settings.selectionWindow;
+    this.lineWidth = 1;
+    this.dashPattern = [];
+
+    if (data) {
+      if (data.hasOwnProperty('points')) {
+        if (data.points[1].y > data.points[0].y) {
+          this.colour = DesignCore.Settings.selectionWindow;
+          this.dashPattern = [5];
+        } else {
+          this.colour = DesignCore.Settings.crossingWindow;
+        }
+
+        this.points = [];
+        const point1 = new Point(data.points[0].x, data.points[0].y);
+        const point2 = new Point(data.points[1].x, data.points[1].y);
+
+        this.points.push(point1);
+        this.points.push(point2);
+      }
+    }
+  }
+
+  /**
+   * Draw the entity
+   * @param {Object} renderer
+   * @param {number} scale
+   */
+  draw(renderer, scale) {
+    const colour = this.colour;
+    const scaledPattern = this.dashPattern.map((x) => x / scale);
+
+    const p0 = this.points[0];
+    const p1 = this.points[1];
+    const rectPoints = [
+      new Point(p0.x, p0.y),
+      new Point(p1.x, p0.y),
+      new Point(p1.x, p1.y),
+      new Point(p0.x, p1.y),
+    ];
+
+    renderer.setColour(colour);
+    renderer.setLineWidth(this.lineWidth / scale);
+
+    // Semi-transparent fill
+    renderer.setDash([], 0);
+    renderer.drawShape(rectPoints, { closed: true, fill: true, stroke: false, alpha: 0.2 });
+
+    // Dashed outline
+    renderer.setDash(scaledPattern, 0);
+    renderer.drawShape(rectPoints, { closed: true, fill: false, stroke: true });
+  }
+}