@design-core/core 0.0.6 → 50.1.0

package/core/lib/snapping.js

@@ -1,198 +1,11 @@
 
 import { Point } from '../entities/point.js';
-import { Colours } from './colours.js';
 import { Utils } from './utils.js';
 
+import { SnapPoint } from './auxiliary/snapPoint.js';
+import { TrackingLine } from './auxiliary/trackingLine.js';
 import { DesignCore } from '../designCore.js';
-
-/** SnapPoint Class */
-export class SnapPoint {
-  static Type = Object.freeze({
-    NONE: 'none',
-    END: 'end',
-    MID: 'mid',
-    CENTRE: 'centre',
-    QUADRANT: 'quadrant',
-    NEAREST: 'nearest',
-    TANGENT: 'tangent',
-    NODE: 'node',
-    PERPENDICULAR: 'perpendicular',
-  });
-
-  /**
-   * Create SnapPoint
-   * @param {Point} snapPoint
-   * @param {string} type - snap type from SnapPoint.Type
-   */
-  constructor(snapPoint, type = SnapPoint.Type.END) {
-    this.snapPoint = snapPoint;
-    this.type = type;
-  }
-
-  /**
-   * Draw the entity
-   * @param {Object} ctx - context
-   * @param {number} scale
-   */
-  draw(ctx, scale) {
-    const snapColour = DesignCore.Settings.snaptrackingcolour;
-    const size = 6 / scale;
-    const x = this.snapPoint.x;
-    const y = this.snapPoint.y;
-    const lineWidth = 2.5 / scale;
-
-    try { // HTML Canvas
-      ctx.strokeStyle = Colours.rgbToString(snapColour);
-      ctx.lineWidth = lineWidth;
-      ctx.setLineDash([]);
-      ctx.beginPath();
-    } catch { // Cairo
-      const rgbColour = Colours.rgbToScaledRGB(snapColour);
-      ctx.setSourceRGB(rgbColour.r, rgbColour.g, rgbColour.b);
-      ctx.setLineWidth(lineWidth);
-    }
-
-    switch (this.type) {
-      case SnapPoint.Type.END: // square
-        ctx.moveTo(x - size, y - size);
-        ctx.lineTo(x + size, y - size);
-        ctx.lineTo(x + size, y + size);
-        ctx.lineTo(x - size, y + size);
-        ctx.closePath();
-        break;
-      case SnapPoint.Type.MID: // triangle
-        ctx.moveTo(x, y + size);
-        ctx.lineTo(x - size, y - size);
-        ctx.lineTo(x + size, y - size);
-        ctx.closePath();
-        break;
-      case SnapPoint.Type.QUADRANT: // diamond
-        ctx.moveTo(x, y - size);
-        ctx.lineTo(x + size, y);
-        ctx.lineTo(x, y + size);
-        ctx.lineTo(x - size, y);
-        ctx.closePath();
-        break;
-      case SnapPoint.Type.NEAREST: // hourglass (X with horizontal lines at top and bottom)
-        ctx.moveTo(x - size, y - size);
-        ctx.lineTo(x + size, y - size);
-        ctx.lineTo(x - size, y + size);
-        ctx.lineTo(x + size, y + size);
-        ctx.closePath();
-        break;
-      case SnapPoint.Type.TANGENT: // circle with a horizontal line over the top
-        ctx.arc(x, y, size, 0, 6.283);
-        ctx.moveTo(x - size, y + size * 1.5);
-        ctx.lineTo(x + size, y + size * 1.5);
-        break;
-      case SnapPoint.Type.NODE: // circle with an X inside
-        ctx.arc(x, y, size, 0, 6.283);
-        ctx.moveTo(x - size * 0.7, y - size * 0.7);
-        ctx.lineTo(x + size * 0.7, y + size * 0.7);
-        ctx.moveTo(x + size * 0.7, y - size * 0.7);
-        ctx.lineTo(x - size * 0.7, y + size * 0.7);
-        break;
-      case SnapPoint.Type.PERPENDICULAR: // right-angle corner (L-shape)
-        ctx.moveTo(x - size, y + size);
-        ctx.lineTo(x - size, y - size);
-        ctx.lineTo(x + size, y - size);
-        break;
-      default: // CENTRE - circle
-        ctx.arc(x, y, size, 0, 6.283);
-        break;
-    }
-
-    ctx.stroke();
-  }
-}
-
-/** TrackingLine Class - dotted tracking line for polar/ortho snap */
-class TrackingLine {
-  /**
-   * Create TrackingLine
-   * @param {Point} inputPoint - the previous input point (line passes through this)
-   * @param {Point} snapPoint - the current snapped mouse point (direction reference)
-   */
-  constructor(inputPoint, snapPoint) {
-    this.inputPoint = inputPoint;
-    this.snapPoint = snapPoint;
-  }
-
-  /**
-   * Draw the tracking line, extended to the visible canvas edges
-   * @param {Object} ctx - context
-   * @param {number} scale
-   */
-  draw(ctx, scale) {
-    const from = this.inputPoint;
-    const dir = this.snapPoint.subtract(from);
-    const lineWidth = 2 / scale;
-
-    if (dir.x === 0 && dir.y === 0) {
-      return;
-    }
-
-    // Compute visible canvas bounds in scene space
-    const w = DesignCore.Canvas.width;
-    const h = DesignCore.Canvas.height;
-    const corner0 = DesignCore.Mouse.transformToScene(new Point(0, 0));
-    const corner1 = DesignCore.Mouse.transformToScene(new Point(w, h));
-    const boundsMin = corner0.min(corner1);
-    const boundsMax = corner0.max(corner1);
-
-    // Clip the infinite line (through 'from' in direction dir) to canvas bounds
-    let tMin = -Infinity;
-    let tMax = Infinity;
-
-    if (dir.x !== 0) {
-      const tx1 = (boundsMin.x - from.x) / dir.x;
-      const tx2 = (boundsMax.x - from.x) / dir.x;
-      tMin = Math.max(tMin, Math.min(tx1, tx2));
-      tMax = Math.min(tMax, Math.max(tx1, tx2));
-    } else if (from.x < boundsMin.x || from.x > boundsMax.x) {
-      return;
-    }
-
-    if (dir.y !== 0) {
-      const ty1 = (boundsMin.y - from.y) / dir.y;
-      const ty2 = (boundsMax.y - from.y) / dir.y;
-      tMin = Math.max(tMin, Math.min(ty1, ty2));
-      tMax = Math.min(tMax, Math.max(ty1, ty2));
-    } else if (from.y < boundsMin.y || from.y > boundsMax.y) {
-      return;
-    }
-
-    if (tMax < tMin) {
-      return;
-    }
-
-    const start = from.add(dir.scale(tMin));
-    const end = from.add(dir.scale(tMax));
-
-    const lineColour = DesignCore.Settings.snaptrackingcolour;
-    const dashSize = 4 / scale;
-
-    ctx.save();
-
-    try { // HTML Canvas
-      ctx.beginPath();
-      ctx.strokeStyle = Colours.rgbToString(lineColour);
-      ctx.lineWidth = lineWidth;
-      ctx.setLineDash([dashSize, dashSize]);
-    } catch { // Cairo
-      const rgbColour = Colours.rgbToScaledRGB(lineColour);
-      ctx.setSourceRGB(rgbColour.r, rgbColour.g, rgbColour.b);
-      ctx.setLineWidth(lineWidth);
-      ctx.setDash([dashSize, dashSize], 0);
-    }
-
-    ctx.moveTo(start.x, start.y);
-    ctx.lineTo(end.x, end.y);
-    ctx.stroke();
-
-    ctx.restore();
-  }
-}
+import { Property } from '../properties/property.js';
 
 /** Snapping Class */
 export class Snapping {
@@ -271,7 +84,7 @@ export class Snapping {
     let delta = snapAperture / DesignCore.Canvas.getScale(); // convert to scene space
 
     for (let i = 0; i < DesignCore.Scene.entities.count(); i++) {
-      const layer = DesignCore.LayerManager.getItemByName(DesignCore.Scene.entities.get(i).layer);
+      const layer = DesignCore.LayerManager.getItemByName(DesignCore.Scene.entities.get(i).getProperty(Property.Names.LAYER));
 
       if (!layer?.isVisible) {
         continue;

package/core/lib/stateManager.js

@@ -200,7 +200,7 @@ class State {
           // capture previous properties for undo
           const previousProperties = {};
           for (const prop of Object.getOwnPropertyNames(stateChange.properties)) {
-            previousProperties[prop] = stateChange.entity[prop];
+            previousProperties[prop] = stateChange.entity.getProperty(prop);
           }
           const undoStateChange = new UpdateState(stateChange.entity, previousProperties);
           this.undoStateChanges.push(undoStateChange);
@@ -208,6 +208,15 @@ class State {
           this.entityManager.update(index, stateChange.properties);
         }
       }
+
+      if (stateChange instanceof ReplaceState) {
+        const index = this.entityManager.indexOf(stateChange.entity);
+        if (index !== -1) {
+          this.entityManager.replace(index, stateChange.replacement);
+          const undoStateChange = new ReplaceState(stateChange.replacement, stateChange.entity);
+          this.undoStateChanges.push(undoStateChange);
+        }
+      }
     }
   }
 
@@ -231,6 +240,13 @@ class State {
           this.entityManager.update(index, stateChange.properties);
         }
       }
+
+      if (stateChange instanceof ReplaceState) {
+        const index = this.entityManager.indexOf(stateChange.entity);
+        if (index !== -1) {
+          this.entityManager.replace(index, stateChange.replacement);
+        }
+      }
     }
   }
 }
@@ -286,3 +302,16 @@ export class UpdateState extends StateChange {
     super(entity, properties);
   }
 }
+
+/** Replace State Class */
+export class ReplaceState {
+  /**
+   * Create Replace State
+   * @param {object} entity - the entity to be replaced (used to locate it by reference)
+   * @param {object} replacement - the entity to put in its place
+   */
+  constructor(entity, replacement) {
+    this.entity = entity;
+    this.replacement = replacement;
+  }
+}

package/core/lib/utils.js

@@ -1,6 +1,7 @@
 
 import { Logging } from './logging.js';
 import { Constants } from './constants.js';
+import { Property } from '../properties/property.js';
 
 /** Utils Class */
 export class Utils {
@@ -46,26 +47,26 @@ export class Utils {
   }
 
   /**
-   * Sort points around an arc center by angular position.
+   * Sort points around an arc centre by angular position.
    * Mutates the points array.
    *
    * @param {Array} points - array of points
    * @param {Point} startPoint - arc start point
    * @param {Point} endPoint - arc end point
-   * @param {Point} centerPoint - arc center point
+   * @param {Point} centrePoint - arc centre point
    * @param {number} direction - arc direction (ccw >0, cw <=0)
    *
    */
-  static sortPointsOnArc(points, startPoint, endPoint, centerPoint, direction = 1) {
+  static sortPointsOnArc(points, startPoint, endPoint, centrePoint, direction = 1) {
     if (!Array.isArray(points)) return;
 
-    const refAngle = direction > 0 ? centerPoint.angle(startPoint) : centerPoint.angle(endPoint);
+    const refAngle = direction > 0 ? centrePoint.angle(startPoint) : centrePoint.angle(endPoint);
     const twoPi = Math.PI * 2;
     const normalize = (ang) => ((ang % twoPi) + twoPi) % twoPi;
 
     // map points to angles
     const mapped = points.map((point) => {
-      const angle = Math.atan2(point.y - centerPoint.y, point.x - centerPoint.x);
+      const angle = Math.atan2(point.y - centrePoint.y, point.x - centrePoint.x);
       const normalizedAngle = normalize(angle - refAngle);
       return { point, normalizedAngle };
     });
@@ -114,13 +115,31 @@ export class Utils {
     }
 
     // Clear handle so a fresh unique handle is assigned when added to the scene
-    if (clone.handle !== undefined) {
-      clone.handle = undefined;
+    if (clone.getProperty?.(Property.Names.HANDLE) !== undefined) {
+      clone.setProperty?.(Property.Names.HANDLE, undefined);
     }
 
     return clone;
   }
 
+  /**
+   * Copy display properties from a source entity into a plain data object.
+   * Useful when creating a new entity that should inherit the visual properties
+   * of an existing one (e.g. the arc produced by Fillet).
+   * @param {Entity} entity - source entity
+   * @param {Array<string>} properties - property names to copy
+   * @return {Object} plain object containing the copied properties
+   */
+  static cloneProperties(entity, properties = ['colour', 'layer', 'lineType', 'lineWidth', 'height', 'styleName', 'dimensionStyle', 'patternName', 'scale']) {
+    const result = {};
+    for (const prop of properties) {
+      if (entity.properties?.has(prop)) {
+        result[prop] = entity.getProperty(prop);
+      }
+    }
+    return result;
+  }
+
   /**
    * Calculate area of triangle given 3 points
    * @param {Point} p1

package/core/properties/entityProperties.js

@@ -0,0 +1,104 @@
+import { Property } from './property.js';
+
+/**
+ * EntityProperties — typed property store for an entity.
+ *
+ * Holds a plain-object store of named Property descriptors.
+ * Each descriptor owns its value.
+ * Using a plain object (rather than a private Map) ensures the store is deep-cloneable by Utils.cloneObject.
+ *
+ * Computed properties may supply get(entity) and set(entity, value) functions.
+ * These are stateless functions (not bound methods) so they survive cloneObject.
+ */
+export class EntityProperties {
+  /** @type {Object.<string, Property>} */
+  // Store is a plain object to ensure it is deep-cloneable by Utils.cloneObject.
+  _store = {};
+
+  /**
+   * Register a property.
+   * @param {string} name - property name
+   * @param {Object} definition - passed directly to the Property constructor
+   * @param {string} definition.type - Property.Type constant
+   * @param {any} definition.value - initial value
+   * @param {boolean} [definition.readOnly=false]
+   * @param {boolean} [definition.visible=true]
+   * @param {number} [definition.dxfCode]
+   * @param {Function} [definition.get] - computed getter: (entity) => value
+   * @param {Function} [definition.set] - computed setter: (entity, value) => void
+   */
+  add(name, definition) {
+    this._store[name] = new Property(definition);
+  }
+
+  /**
+   * Get the current value of a property.
+   * For computed properties, invokes get(entity).
+   * For stored properties, returns prop.value directly.
+   * @param {string} name
+   * @param {Object} [entity] - passed to the computed getter when prop.get is defined
+   * @return {any} value, or undefined if not registered
+   */
+  get(name, entity) {
+    const prop = this._store[name];
+    if (!prop) return undefined;
+    if (prop.get) return prop.get(entity);
+    return prop.value;
+  }
+
+  /**
+   * Set the value of a property.
+   * For computed properties, invokes set(entity, value).
+   * For stored properties, updates prop.value directly.
+   * No-op if the property is not registered or is readOnly.
+   * @param {string} name
+   * @param {any} value
+   * @param {Object} [entity] - passed to the computed setter when prop.set is defined
+   */
+  set(name, value, entity) {
+    const prop = this._store[name];
+    if (!prop) return;
+    if (prop.readOnly) return;
+    if (prop.set) {
+      prop.set(entity, value);
+    } else {
+      prop.value = value;
+    }
+  }
+
+  /**
+   * Check whether a property is registered.
+   * @param {string} name
+   * @return {boolean}
+   */
+  has(name) {
+    return name in this._store;
+  }
+
+  /**
+   * Remove a property from the store.
+   * @param {string} name
+   */
+  remove(name) {
+    delete this._store[name];
+  }
+
+  /**
+   * Return names of all visible properties in registration order.
+   * @return {string[]}
+   */
+  list() {
+    return Object.entries(this._store)
+        .filter(([, prop]) => prop.visible)
+        .map(([name]) => name);
+  }
+
+  /**
+   * Return the full Property descriptor for a named property.
+   * @param {string} name
+   * @return {Property|undefined}
+   */
+  definition(name) {
+    return this._store[name];
+  }
+}

package/core/properties/property.js

@@ -2,8 +2,112 @@ import { Flags } from './flags.js';
 
 /** Property Class */
 export class Property {
-  /** Create property */
-  constructor() { }
+  /**
+   * Create a Property descriptor
+   * @param {Object} [options]
+   * @param {string} options.type - Property.Type constant describing the value kind
+   * @param {any} options.value - initial value
+   * @param {boolean} [options.readOnly=false] - when true, set() is a no-op
+   * @param {boolean} [options.visible=true] - controls whether the property appears in listings
+   * @param {number} [options.dxfCode] - associated DXF group code (informational)
+   * @param {Function} [options.get] - computed getter: (entity) => value
+   * @param {Function} [options.set] - computed setter: (entity, value) => void
+   */
+  constructor({ type, value, readOnly = false, visible = true, dxfCode, get, set, options } = {}) {
+    this.type = type;
+    this._value = value;
+    this.readOnly = readOnly;
+    this.visible = visible;
+    this.dxfCode = dxfCode;
+    this.get = get;
+    this.set = set;
+    this.options = options;
+  }
+
+  /** @return {any} current value */
+  get value() {
+    return this._value;
+  }
+
+  /** @param {any} val - new value; ignored when readOnly */
+  set value(val) {
+    if (!this.readOnly) {
+      this._value = val;
+    }
+  }
+
+  /**
+   * Property type constants
+   * Used to describe the type of a property value for UI rendering and validation.
+   * - NUMBER: numeric value (integer or float)
+   * - STRING: text value
+   * - BOOLEAN: true/false toggle
+   * - LIST: selection from a named set (layer, lineType, hatch pattern, etc.)
+   * - COLOUR: RGB colour object
+   * - LABEL: read-only display value (no editing)
+   */
+  static Type = {
+    NUMBER: 'NUMBER',
+    STRING: 'STRING',
+    BOOLEAN: 'BOOLEAN',
+    LIST: 'LIST',
+    COLOUR: 'COLOUR',
+    LABEL: 'LABEL',
+    ENTITIES: 'ENTITIES',
+  };
+
+  /**
+   * Canonical property name constants.
+   * Use these instead of raw strings when calling getProperty() / setProperty().
+   */
+  static Names = Object.freeze({
+    // ── Base entity (Entity class) ────────────────────────────────────────────
+    HANDLE: 'handle',
+    LAYER: 'layer',
+    LINETYPE: 'lineType',
+    LINEWIDTH: 'lineWidth',
+    COLOUR: 'colour',
+    POINTS: 'points',
+    // ── Shared (multiple entities) ────────────────────────────────────────────
+    ANGLE: 'angle',
+    BLOCKNAME: 'blockName',
+    DIRECTION: 'direction',
+    HEIGHT: 'height',
+    RADIUS: 'radius',
+    ROTATION: 'rotation',
+    SCALE: 'scale',
+    STRING: 'string',
+    STYLENAME: 'styleName',
+    // ── PolylineBase ──────────────────────────────────────────────────────────
+    CLOSED: 'closed',
+    // ── Hatch ─────────────────────────────────────────────────────────────────
+    CHILDENTITIES: 'childEntities',
+    PATTERNNAME: 'patternName',
+    // ── Text ──────────────────────────────────────────────────────────────────
+    BACKWARDS: 'backwards',
+    HORIZONTALALIGNMENT: 'horizontalAlignment',
+    UPSIDEDOWN: 'upsideDown',
+    VERTICALALIGNMENT: 'verticalAlignment',
+    // ── ArcAlignedText ────────────────────────────────────────────────────────
+    ARCSIDE: 'arcSide',
+    BOLD: 'bold',
+    CHARACTERSPACING: 'characterSpacing',
+    FONTNAME: 'fontName',
+    ITALIC: 'italic',
+    OFFSETFROMARC: 'offsetFromArc',
+    OFFSETFROMLEFT: 'offsetFromLeft',
+    OFFSETFROMRIGHT: 'offsetFromRight',
+    TEXTALIGNMENT: 'textAlignment',
+    TEXTORIENTATION: 'textOrientation',
+    TEXTREVERSED: 'textReversed',
+    UNDERLINE: 'underline',
+    WIDTHFACTOR: 'widthFactor',
+    // ── Dimensions ────────────────────────────────────────────────────────────
+    DIMENSIONSTYLE: 'dimensionStyle',
+    LEADERLENGTH: 'leaderLength',
+    LINEARDIMANGLE: 'linearDimAngle',
+    TEXTOVERRIDE: 'textOverride',
+  });
 
   /**
    * Parse the input values and return a value