@design-core/core 0.0.6 → 50.1.0

package/core/lib/canvas.js

@@ -1,14 +1,21 @@
 import { Matrix } from './matrix.js';
-import { Colours } from './colours.js';
+import { Colour } from './colour.js';
+import { BoundingBox } from './boundingBox.js';
 import { Point } from '../entities/point.js';
 import { Input } from './input.js';
+import { Logging } from './logging.js';
+import { PlotOptions } from './plotOptions.js';
+// import { RendererBase } from './renderers/rendererBase.js';
 
 import { DesignCore } from '../designCore.js';
+import { Property } from '../properties/property.js';
 
 /** Canvas Class */
 export class Canvas {
   #panCursorTimeout;
   #baseCursorState = 'DEFAULT';
+  #lastPanCanvasPoint = new Point();
+  #renderer = null;
 
   /** Create Canvas */
   constructor() {
@@ -21,19 +28,8 @@ export class Canvas {
     this.width = 1;
     this.height = 1;
 
-    this.panDelta = new Point();
-    this.lastDelta = new Point();
     this.flipped = false;
 
-    this.paintState;
-
-    this.paintStates = {
-      ENTITIES: 'ENTITIES',
-      TEMPORARY: 'TEMPORARY',
-      SELECTED: 'SELECTED',
-      AUXILLARY: 'AUXILLARY',
-    };
-
     this.cursorStates = Input.Cursor;
 
     this.cursorState = Input.Cursor.DEFAULT;
@@ -62,6 +58,15 @@ export class Canvas {
     this.externalPaintCallbackFunction = callback;
   }
 
+  /**
+   * Set the renderer class to use for entity drawing.
+   * Must be called once during UI initialisation before the first paint.
+   * @param {Function} RendererClass - CanvasRenderer or CairoRenderer class
+   */
+  setRenderer(RendererClass) {
+    this.#renderer = RendererClass;
+  }
+
   /**
    * Set external cursor callback
    * Called when the cursor state changes.
@@ -116,8 +121,10 @@ export class Canvas {
   mouseDown(button) {
     switch (button) {
       case 0: // left button
+        this.#lastPanCanvasPoint = DesignCore.Mouse.pointOnCanvas();
         break;
       case 1: // middle button
+        this.#lastPanCanvasPoint = DesignCore.Mouse.pointOnCanvas();
         clearTimeout(this.#panCursorTimeout);
         this.#panCursorTimeout = setTimeout(() => this.#setCursor(Input.Cursor.GRABBING), 250);
         break;
@@ -138,7 +145,6 @@ export class Canvas {
         break;
       case 1: // middle button
         clearTimeout(this.#panCursorTimeout);
-        this.lastDelta = new Point();
         this.requestPaint();
         this.#setCursor(this.#baseCursorState);
         break;
@@ -169,13 +175,10 @@ export class Canvas {
    * Pan the canvas
    */
   pan() {
-    // pandelta: mouse drag distance in scene scale
-    this.panDelta = DesignCore.Mouse.pointOnScene().subtract(DesignCore.Mouse.transformToScene(DesignCore.Mouse.mouseDownCanvasPoint));
-    // delta difference between last delta calculation and current mouse position
-    const delta = this.panDelta.subtract(this.lastDelta);
-    // set the last delta value
-    this.lastDelta = this.panDelta;
-    // add translation to the matrix object
+    const current = DesignCore.Mouse.pointOnCanvas();
+    const delta = DesignCore.Mouse.transformToScene(current)
+        .subtract(DesignCore.Mouse.transformToScene(this.#lastPanCanvasPoint));
+    this.#lastPanCanvasPoint = current;
     this.matrix.translate(delta.x, delta.y);
     this.requestPaint();
   }
@@ -186,7 +189,9 @@ export class Canvas {
    */
   wheel(delta) {
     if (DesignCore.Mouse.buttonTwoDown) return;
-    const scale = Math.pow(1 + Math.abs(delta), delta > 0 ? 1 : -1);
+    // Clamp to [-1, 1] so that high-resolution mice and track pads don't produce runaway jumps.
+    const clampedDelta = Math.max(-1, Math.min(1, delta));
+    const scale = Math.pow(1.2, clampedDelta);
     if (scale < 1 && this.getScale() > this.minScaleFactor || scale > 1 && this.getScale() < this.maxScaleFactor) {
       this.zoom(scale);
     }
@@ -256,6 +261,77 @@ export class Canvas {
     }
   }
 
+  /**
+   * Build a renderer transform matrix that fits a scene area onto a page.
+   * Both PdfRenderer and SvgRenderer expect d = +scale (no Y-flip).
+   * @param {object} options
+   * @param {BoundingBox} options.area - scene area to map onto the page
+   * @param {number} options.pageWidth - page width in renderer units (points)
+   * @param {number} options.pageHeight - page height in renderer units (points)
+   * @param {number|null} [options.plotScale=null] - numeric scale factor, or null to fit to page
+   * @param {number} [options.margin=40] - margin on each side in renderer units
+   * @return {{a: number, d: number, e: number, f: number}|null} matrix object, or null if area is empty
+   */
+  buildExportMatrix({ area, pageWidth, pageHeight, plotScale = null, margin = 40 }) {
+    const sceneWidth = area.xMax - area.xMin;
+    const sceneHeight = area.yMax - area.yMin;
+    if (sceneWidth === 0 || sceneHeight === 0) return null;
+
+    const usableWidth = pageWidth - 2 * margin;
+    const usableHeight = pageHeight - 2 * margin;
+
+    const scale = plotScale === null ?
+      Math.min(usableWidth / sceneWidth, usableHeight / sceneHeight) :
+      plotScale;
+
+    const translateX = margin + (usableWidth - sceneWidth * scale) / 2 - area.xMin * scale;
+    const translateY = margin + (usableHeight - sceneHeight * scale) / 2 - area.yMin * scale;
+
+    return { a: scale, d: scale, e: translateX, f: translateY };
+  }
+
+  /**
+   * Export the visible scene entities to a renderer.
+   * Unlike paint(), this skips background, grid, preview, selection, and auxiliary passes.
+   * Builds and applies the export matrix from plotOptions before painting.
+   * @param {RendererBase} renderer
+   * @param {PlotOptions} plotOptions
+   * @return {boolean} false if no exportable area was found
+   */
+  exportTo(renderer, plotOptions) {
+    let area;
+    if (plotOptions.plotArea === PlotOptions.Area.DISPLAY) {
+      const viewport = this.getSceneOffset();
+      area = new BoundingBox(new Point(viewport.xmin, viewport.ymin), new Point(viewport.xmax, viewport.ymax));
+    } else {
+      area = DesignCore.Scene.boundingBox();
+    }
+    if (!area) return false;
+
+    const matrix = this.buildExportMatrix({
+      area,
+      pageWidth: plotOptions.pageWidth,
+      pageHeight: plotOptions.pageHeight,
+      plotScale: plotOptions.plotScale,
+    });
+    if (!matrix) return false;
+
+    renderer.setTransform(matrix);
+
+    renderer.setBackgroundColour({ r: 255, g: 255, b: 255 });
+    renderer.setStyle(plotOptions.style);
+
+    const plotScale = matrix.a;
+    this.#paintEntities(
+        DesignCore.Scene.entities, renderer, null,
+        (entity) => DesignCore.LayerManager.getItemByName(entity.getProperty(Property.Names.LAYER))?.isPlottable,
+        null, null,
+        plotScale,
+    );
+
+    return true;
+  }
+
   /**
    * Paint the canvas
    * @param {object} context
@@ -278,151 +354,161 @@ export class Canvas {
       this.flipped = true;
     }
 
+    const renderer = new this.#renderer(context);
+
     // set the transform for the context
     // this will set all the pan and zoom actions
-    try {
-      context.setTransform(this.matrix);
-    } catch {
-      // context.setMatrix(this.matrix)
-      context.translate(this.matrix.e, this.matrix.f);
-      context.scale(this.matrix.a, this.matrix.d);
-    }
+    renderer.setTransform(this.matrix);
+    renderer.setBackgroundColour(DesignCore.Settings.canvasbackgroundcolour);
 
     const pos = new Point();
     const origin = DesignCore.Mouse.transformToScene(pos);
-
-    // Paint the scene background
-    try {// HTML
-      // this.clear()
-      context.fillStyle = Colours.rgbToString(DesignCore.Settings.canvasbackgroundcolour);
-      context.fillRect(origin.x, origin.y, width / this.getScale(), height / this.getScale());
-      // context.globalAlpha = this.cvs.alpha
-    } catch { // Cairo
-      const rgbColour = Colours.rgbToScaledRGB(DesignCore.Settings.canvasbackgroundcolour);
-      context.setSourceRGB(rgbColour.r, rgbColour.g, rgbColour.b);
-      const scaled = new Point(width, height);
-      const sc = DesignCore.Mouse.transformToScene(scaled);
-      context.moveTo(origin.x, origin.y);
-      context.lineTo(origin.x, sc.y);
-      context.lineTo(sc.x, sc.y);
-      context.lineTo(sc.x, origin.y);
-      context.lineTo(origin.x, origin.y);
-      context.fill();
-    }
-
-    this.paintGrid(context, width, height);
-
     const scale = this.getScale();
 
-    // Paint the primary scene items
-    this.paintState = this.paintStates.ENTITIES;
-
-    const entityCount = DesignCore.Scene.entities.count();
-    for (let i = 0; i < entityCount; i++) {
-      const entity = DesignCore.Scene.entities.get(i);
-      const layer = DesignCore.LayerManager.getItemByName(entity.layer);
-
-      if (!layer?.isVisible) {
-        continue;
-      }
-
-      this.setContext(entity, context, undefined, scale);
-      entity.draw(context, scale);
-    }
+    // Paint the scene background
+    renderer.fillBackground(origin, width, height, scale);
+    // Paint the grid
+    this.paintGrid(renderer);
+
+    const bg = renderer.getBackgroundColour();
+    const hoverHaloColour = Colour.blend(DesignCore.Core.settings.accentcolour, bg, 0.5);
+    const selectionHaloColour = Colour.blend(DesignCore.Core.settings.accentcolour, bg, 0.25);
+    const selectionLineWidthDelta = 5;
+
+    // Paint the primary scene items (layer-visibility filtered).
+    // Hovered entity detected inline: renderer draws glow + entity in a single drawShape call.
+    this.#paintEntities(
+        DesignCore.Scene.entities, renderer, null,
+        (entity) => DesignCore.LayerManager.getItemByName(entity.getProperty(Property.Names.LAYER))?.isVisible,
+        DesignCore.Scene.hoverEntities,
+        { colour: hoverHaloColour, lineWidthDelta: selectionLineWidthDelta },
+    );
 
     // Paint the temporary scene items
-    this.paintState = this.paintStates.TEMPORARY;
-    const tempCount = DesignCore.Scene.tempEntities.count();
-    for (let j = 0; j < tempCount; j++) {
-      const entity = DesignCore.Scene.tempEntities.get(j);
-      this.setContext(entity, context, undefined, scale);
-      entity.draw(context, scale);
-    }
+    this.#paintEntities(DesignCore.Scene.previewEntities, renderer);
 
-    // Paint the selected scene items
-    this.paintState = this.paintStates.SELECTED;
-    const selectedItems = DesignCore.Scene.selectionManager.selectedItems;
-    for (let k = 0; k < selectedItems.length; k++) {
-      const entity = selectedItems[k];
-      this.setContext(entity, context, undefined, scale);
-      entity.draw(context, scale);
-    }
+    // Paint the selected scene items: single pass — renderer handles glow + entity internally.
+    const selectedEntities = DesignCore.Scene.selectionManager.selectedEntities;
+    this.#paintEntities(selectedEntities, renderer, { colour: selectionHaloColour, lineWidthDelta: selectionLineWidthDelta });
 
     // Paint the auxiliary scene items
     // auxiliary items include things like the selection window, snap points etc
     // these items have their own draw routine
-    this.paintState = this.paintStates.AUXILLARY;
+    renderer.setHighlight(false);
     const auxCount = DesignCore.Scene.auxiliaryEntities.count();
     for (let l = 0; l < auxCount; l++) {
-      DesignCore.Scene.auxiliaryEntities.get(l).draw(context, scale);
+      renderer.save();
+      DesignCore.Scene.auxiliaryEntities.get(l).draw(renderer, scale);
+      renderer.restore();
     }
+  }
 
-    this.paintState = undefined;
+  /**
+   * Recursively paint a single entity and any children it returns.
+   * Container entities (Insert, DimensionBase) return an array of child items from draw().
+   * Leaf entities return undefined. Renderer state is saved/restored around each entity.
+   * @param {Object} entity - entity to paint
+   * @param {Object} renderer - renderer instance
+   * @param {Object|undefined} parent - enclosing insert/dimension for ByBlock colour resolution
+   * @param {Object} overrides - rendering overrides passed to setContext
+   * @param {number} [scale] - forwarded to setContext
+   */
+  #paintEntity(entity, renderer, parent, overrides, scale) {
+    renderer.save();
+    try {
+      this.setContext(entity, renderer, parent, overrides, scale);
+      const children = entity.draw(renderer);
+      if (children) {
+        for (const item of children) {
+          this.#paintEntity(item, renderer, entity, overrides, scale);
+        }
+      }
+    } catch (err) {
+      Logging.instance.warn(`draw failed for entity type '${entity.type}': ${err}`);
+    } finally {
+      renderer.restore();
+    }
   }
 
   /**
-   * Set the scene context
-   * @param {entity} item
-   * @param {Object} context - scene painting context from ui
-   * @param {Object} block - insert or dimension element for the current block, required for colour ByBlock
+   * Draw a collection of entities, calling setContext before each draw.
+   * Supports EntityManager instances (with .count()/.get()) and plain arrays.
+   * @param {EntityManager|Array} entities
+   * @param {Object} renderer - renderer instance
+   * @param {Object|null} [overrides] - optional rendering overrides passed to setContext for all entities
+   * @param {Object} [overrides.colour] - highlight glow colour (entity always draws in its natural colour)
+   * @param {number} [overrides.lineWidthDelta] - glow extension in pixels (divided by scale); added to renderer highlight delta
+   * @param {Function} [filter] - optional predicate; entity is skipped when it returns falsy
+   * @param {EntityManager|null} [hoverCollection] - when provided, entities found in this set receive hoverOverrides
+   * @param {Object|null} [hoverOverrides] - overrides applied to entities matched in hoverCollection
+   * @param {number} [scale] - forwarded to #paintEntity / setContext; defaults to screen zoom when omitted
    */
-  setContext(item, context, block = undefined) {
-    const scale = this.getScale();
+  #paintEntities(entities, renderer, overrides = null, filter = undefined, hoverCollection = null, hoverOverrides = null, scale = undefined) {
+    const isManager = typeof entities.count === 'function';
+    const count = isManager ? entities.count() : entities.length;
+    for (let i = 0; i < count; i++) {
+      const entity = isManager ? entities.get(i) : entities[i];
+      if (filter && !filter(entity)) continue;
+      const isHovered = hoverCollection !== null && hoverCollection.indexOf(entity) !== -1;
+      this.#paintEntity(entity, renderer, undefined, isHovered ? hoverOverrides : (overrides ?? {}), scale);
+    }
+  }
+
+  /**
+   * Set the scene context on the renderer before drawing an entity.
+   * @param {Object} item - entity to draw
+   * @param {Object} renderer - renderer instance
+   * @param {Object} [block] - insert or dimension element for the current block, required for colour ByBlock
+   * @param {Object} [overrides] - optional rendering overrides
+   * @param {Object} [overrides.colour] - overrides all colour resolution (e.g. for halo/glow passes)
+   * @param {number} [overrides.lineWidthDelta] - additional width in pixels (divided by scale) added to the entity's line width
+   * @param {number} [scale] - scale divisor for line width and dash pattern; defaults to the current screen zoom
+   */
+  setContext(item, renderer, block = undefined, overrides = {}, scale = this.getScale()) {
     let colour = item.getDrawColour();
     const lineType = item.getLineType();
-    let lineWidth = item.lineWidth / scale;
-
-    if (this.paintState === this.paintStates.SELECTED) {
-      // Set Context for selected items
-      colour = DesignCore.Core.settings.selecteditemscolour;
-      lineWidth = (item.lineWidth * 2) / scale;
-    } else if (this.paintState === this.paintStates.TEMPORARY) {
-      // Set context for temp items
-      lineWidth = (item.lineWidth * 2) / scale;
-    }
+    let lineWidth = (item.getProperty(Property.Names.LINEWIDTH) ?? 1) / scale;
+    const bg = renderer.getBackgroundColour() ?? { r: 0, g: 0, b: 0 };
 
-    if (block && this.paintState != this.paintStates.SELECTED) {
-      // set colour for items with colour byblock
-      if (item.entityColour.aci === 0) {
-        colour = block.getDrawColour();
-      }
+    if (block && item.entityColour.aci === 0) {
+      colour = block.getDrawColour();
     }
-
     // ACI 7: white on dark background, black on light background
-    if (this.paintState !== this.paintStates.SELECTED && this.#isAci7(item, block)) {
-      const bg = DesignCore.Settings.canvasbackgroundcolour;
+    if (this.#isAci7(item, block)) {
       colour = (bg.r + bg.g + bg.b) / 3 < 128 ? { r: 255, g: 255, b: 255 } : { r: 0, g: 0, b: 0 };
     }
 
-    try { // HTML Canvas
-      context.strokeStyle = Colours.rgbToString(colour);
-      context.fillStyle = Colours.rgbToString(colour);
-      context.lineWidth = lineWidth;
-      context.setLineDash(lineType.getPattern(scale));
-      context.beginPath();
-    } catch { // Cairo
-      const rgbColour = Colours.rgbToScaledRGB(colour);
-      context.setSourceRGB(rgbColour.r, rgbColour.g, rgbColour.b);
-      context.setDash(lineType.getPattern(scale), 1);
-      context.setLineWidth(lineWidth);
+    if (overrides.colour !== undefined) {
+      // Highlight pass: overrides.colour is the glow colour only — the entity
+      // always draws in its natural resolved colour on the normal pass.
+      // lineWidthDelta goes to the highlight delta so the glow extends beyond
+      // the entity line; the entity's own lineWidth is unchanged.
+      renderer.setHighlight(true, overrides.colour, (overrides.lineWidthDelta ?? 0) / scale);
+    } else {
+      renderer.setHighlight(false);
+      lineWidth += (overrides.lineWidthDelta ?? 0) / scale;
     }
+
+    renderer.setColour(colour);
+    renderer.setLineWidth(lineWidth);
+    renderer.setDash(lineType.getPattern(scale), 0);
   }
 
   /**
    * Resolve whether the effective draw colour for an item is ACI 7.
    * Follows ByLayer and ByBlock indirection.
-   * @param {entity} item
-   * @param {entity} block - enclosing insert/dimension, or undefined
+   * @param {Object} item - entity to check
+   * @param {Object} [block] - enclosing insert/dimension, or undefined
    * @return {boolean}
    */
   #isAci7(item, block) {
     let colour;
     if (item.entityColour.byBlock && block) {
       colour = block.entityColour.byLayer ?
-        DesignCore.LayerManager.getItemByName(block.layer)?.layerColour :
+        DesignCore.LayerManager.getItemByName(block.getProperty(Property.Names.LAYER))?.layerColour :
         block.entityColour;
     } else if (item.entityColour.byLayer) {
-      colour = DesignCore.LayerManager.getItemByName(item.layer)?.layerColour;
+      colour = DesignCore.LayerManager.getItemByName(item.getProperty(Property.Names.LAYER))?.layerColour;
     } else {
       colour = item.entityColour;
     }
@@ -431,23 +517,18 @@ export class Canvas {
 
   /**
    * Paint the background grid
-   * @param {object} context
+   * @param {object} renderer
    */
-  paintGrid(context) {
+  paintGrid(renderer) {
     const scale = this.getScale();
 
     // TODO: Move grid linewidth to settings?
     let lineWidth = 0.75;
 
-    try { // HTML Canvas
-      context.strokeStyle = Colours.rgbToString(DesignCore.Settings.gridcolour);
-      context.lineWidth = lineWidth / scale;
-      context.beginPath();
-    } catch { // Cairo
-      context.setLineWidth(lineWidth / scale);
-      const rgbColour = Colours.rgbToScaledRGB(DesignCore.Settings.gridcolour);
-      context.setSourceRGB(rgbColour.r, rgbColour.g, rgbColour.b);
-    }
+    renderer.setColour(DesignCore.Settings.gridcolour);
+    renderer.setLineWidth(lineWidth / scale);
+    renderer.setDash([], 0);
+    renderer.setHighlight(false);
 
     const extents = this.getSceneOffset();
 
@@ -457,13 +538,11 @@ export class Canvas {
     const ygridmax = extents.ymax;
 
     // Draw major gridlines through origin
-    context.moveTo(xgridmin, 0);
-    context.lineTo(xgridmax, 0);
-    context.moveTo(0, 0);
-    context.lineTo(0, ygridmax);
-    context.moveTo(0, 0);
-    context.lineTo(0, ygridmin);
-    context.stroke();
+    renderer.drawSegments([
+      { x1: xgridmin, y1: 0, x2: xgridmax, y2: 0 },
+      { x1: 0, y1: 0, x2: 0, y2: ygridmax },
+      { x1: 0, y1: 0, x2: 0, y2: ygridmin },
+    ], []);
 
     // only draw the grid if within scale limits
     if (scale < this.minScaleFactor || scale > this.maxScaleFactor) {
@@ -473,50 +552,35 @@ export class Canvas {
     if (DesignCore.Settings['drawgrid']) {
       // set a feint linewidth for the grid
       lineWidth = lineWidth * 0.25;
+      renderer.setLineWidth(lineWidth / scale);
 
-      try { // HTML Canvas
-        context.lineWidth = lineWidth / scale;
-        context.beginPath();
-      } catch { // Cairo
-        context.setLineWidth(lineWidth / scale);
-      }
+      // Target ~60px between grid lines; snap to nearest 1/2/5 × 10^n interval
+      const targetPx = 60;
+      const rawInterval = targetPx / scale;
+      const mag = Math.pow(10, Math.floor(Math.log10(rawInterval)));
+      const norm = rawInterval / mag;
+      const gridInterval = mag * (norm < 2 ? 1 : norm < 5 ? 2 : 5);
 
-      // TODO: add setting for grid spacing
-      let gridInterval = 100;
-
-      // define the grid spacing based on zoom level
-      if (scale > 50) {
-        gridInterval = 1;
-      } else if (scale > 5) {
-        gridInterval = 10;
-      } else if (scale < 0.6) {
-        gridInterval = 1000;
-      } else {
-        gridInterval = 100;
-      }
+      const gridSegments = [];
 
       // Draw positive minor X gridlines
       for (let i = 0; i < xgridmax; i = i + gridInterval) {
-        context.moveTo(i, ygridmin);
-        context.lineTo(i, ygridmax);
+        gridSegments.push({ x1: i, y1: ygridmin, x2: i, y2: ygridmax });
       }
       // Draw negative minor X gridlines
       for (let i = 0; i > xgridmin; i = i - gridInterval) {
-        context.moveTo(i, ygridmin);
-        context.lineTo(i, ygridmax);
+        gridSegments.push({ x1: i, y1: ygridmin, x2: i, y2: ygridmax });
       }
       // Draw positive minor Y gridlines
       for (let i = 0; i < ygridmax; i = i + gridInterval) {
-        context.moveTo(xgridmin, i);
-        context.lineTo(xgridmax, i);
+        gridSegments.push({ x1: xgridmin, y1: i, x2: xgridmax, y2: i });
       }
       // Draw negative minor Y gridlines
       for (let i = 0; i > ygridmin; i = i - gridInterval) {
-        context.moveTo(xgridmin, i);
-        context.lineTo(xgridmax, i);
+        gridSegments.push({ x1: xgridmin, y1: i, x2: xgridmax, y2: i });
       }
 
-      context.stroke();
+      renderer.drawSegments(gridSegments, []);
     }
   }
 

package/core/lib/clipboard.js

@@ -69,7 +69,7 @@ export class Clipboard {
       return;
     }
 
-    // copy the item to avoid mutation of originals
+    // copy the entity to avoid mutation of originals
     this.#Entities = entities.map((entity) => Utils.cloneObject(entity));
     // set basepoint to bottom left of selection bounding box
     const bbox = BoundingBox.fromEntities(entities);
@@ -152,7 +152,7 @@ export class Clipboard {
     const clipboardData = { basePoint: undefined, Entities: undefined };
     const jsonEntities = [];
 
-    // convert each entity to a simple object - this allows non-enumberable properties (like points) to be copied
+    // convert each entity to a simple object - this allows non-enumerable properties (like points) to be copied
     for (const ent of this.#Entities) {
       const jsonEntity = this.#simplify(ent);
       jsonEntities.push(jsonEntity);
@@ -171,7 +171,13 @@ export class Clipboard {
    * @return {Object} - simplified object
    */
   #simplify(original) {
-    return Object.getOwnPropertyNames(original).reduce((simplified, property) => {
+    const names = Object.getOwnPropertyNames(original);
+    // 'points' is now stored in EntityProperties and accessed via a prototype accessor,
+    // so it's not an own property — include it explicitly when it's an accessible array.
+    if (!names.includes('points') && Array.isArray(original.points)) {
+      names.push('points');
+    }
+    return names.reduce((simplified, property) => {
       const value = original[property];
       if (Array.isArray(value)) {
         simplified[property] = original[property].map((item) => this.#simplify(item));

package/core/lib/colour.js

@@ -63,6 +63,22 @@ export class Colour {
       this.rgb = rgb;
     }
   }
+
+  /**
+   * Blend two RGB colours together.
+   * @param {{r:number,g:number,b:number}} colourA
+   * @param {{r:number,g:number,b:number}} colourB
+   * @param {number} factor - 0 returns colourA, 1 returns colourB
+   * @return {{r:number,g:number,b:number}}
+   */
+  static blend(colourA, colourB, factor) {
+    const inverseFactor = 1 - factor;
+    return {
+      r: Math.round(colourA.r * inverseFactor + colourB.r * factor),
+      g: Math.round(colourA.g * inverseFactor + colourB.g * factor),
+      b: Math.round(colourA.b * inverseFactor + colourB.b * factor),
+    };
+  }
 }
 
 /**

package/core/lib/commandLine.js

@@ -56,12 +56,7 @@ export class CommandLine {
       this.updateCallbackFunction(this.cmdLine);
     }
 
-    if (DesignCore.Scene.inputManager.activeCommand !== undefined) {
-      // TODO: This should call a common function that is currently called mouseMove in the scene class
-      DesignCore.Scene.tempEntities.clear();
-      DesignCore.Scene.inputManager.activeCommand.preview();
-      DesignCore.Canvas.requestPaint();
-    }
+    DesignCore.Scene.inputManager.refreshPreview();
   }
 
   /**

package/core/lib/commandManager.js

@@ -1,4 +1,5 @@
 import { Line } from '../entities/line.js';
+import { Entity } from '../entities/entity.js';
 import { Polyline } from '../entities/polyline.js';
 import { Lwpolyline } from '../entities/lwpolyline.js';
 import { Circle } from '../entities/circle.js';
@@ -141,21 +142,30 @@ export class CommandManager {
   }
 
   /**
-   * Create a new instance of type using data
+   * Create a new instance of type using data.
+   * When data is a plain object (DXF load path), applies a two-pass normalisation:
+   *   1. Entity.fromDxf()       — resolves group codes shared by all entities (e.g. colour, true colour)
+   *   2. CommandClass.fromDxf() — resolves group codes specific to the entity type (e.g. geometry)
+   * When data is absent or already a canonical object (e.g. an entity instance), it is passed through unchanged.
    * @param {string} type
-   * @param {Array} data
+   * @param {Object} data
    * @return {Object} instance of type
    */
   createNew(type, data) {
-    let newItem;
-    if (this.isCommand(type)) {
-      newItem = new classes[this.getCommand(type)](data);
-    } else {
+    if (!this.isCommand(type)) {
       Logging.instance.warn(`${Strings.Message.UNKNOWNCOMMAND}: ${type}`);
       return;
     }
-
-    return newItem;
+    const CommandClass = classes[this.getCommand(type)];
+    // Skip DXF normalisation when data is absent or is already a canonical object (e.g. an entity instance)
+    if (!data || Object.getPrototypeOf(data) !== Object.prototype) {
+      return new CommandClass(data);
+    }
+    // Resolve group codes shared by all entities (colour, true colour, etc.)
+    const baseNormalised = Entity.fromDxf(data);
+    // Resolve group codes specific to this entity type (geometry, etc.)
+    const classNormalised = Object.prototype.hasOwnProperty.call(CommandClass, 'fromDxf') ? CommandClass.fromDxf(baseNormalised) : baseNormalised;
+    return new CommandClass(classNormalised);
   };
 
   /**