@design-core/core 0.0.6 → 0.0.7

package/core/lib/renderers/svgRenderer.js

@@ -0,0 +1,343 @@
+import { RendererBase } from './rendererBase.js';
+import { Text } from '../../entities/text.js';
+
+/**
+ * Pure-JS SVG renderer.
+ * Implements the RendererBase interface by accumulating SVG elements in memory.
+ * Call getOutput() to retrieve a complete SVG document string.
+ *
+ * Design notes:
+ *  - Zero dependencies: uses only standard SVG elements and string concatenation.
+ *  - Y-flip: a root <g transform="translate(0,H) scale(1,-1)"> converts scene
+ *    Y-up coordinates to SVG Y-down.  All geometry is drawn in scene Y-up space.
+ *  - Arc segments use the native SVG A command (not chord approximation).
+ *  - Text characters receive a local scale(1,-1) to un-flip the glyph.
+ *  - setTransform() is a direct passthrough: the caller must supply a matrix
+ *    with d = +scale (no Y-flip), matching the PDF renderer convention.
+ *  - setHighlight() is a no-op — SVG export shows final geometry only.
+ */
+export class SvgRenderer extends RendererBase {
+  #pageWidth;
+  #pageHeight;
+
+  /** @type {string[]} */
+  #elements = [];
+
+  // Current drawing state
+  #currentColour = { r: 0, g: 0, b: 0 };
+  #currentLineWidth = 1;
+  #currentDash = [];
+  #currentDashOffset = 0;
+
+  // Low-level path accumulation (used by beginPath / tracePath / stroke / closePath)
+  #currentPath = null;
+
+
+  /**
+   * @param {number} pageWidth  - page width in user units (points)
+   * @param {number} pageHeight - page height in user units (points)
+   */
+  constructor(pageWidth, pageHeight) {
+    super();
+    this.#pageWidth = pageWidth;
+    this.#pageHeight = pageHeight;
+  }
+
+  // --- Frame setup ---
+
+  /** @inheritdoc */
+  setTransform(matrix) {
+    const { a, d, e, f } = matrix;
+    this.#emit(`<g transform="matrix(${this.#fmt(a)} 0 0 ${this.#fmt(d)} ${this.#fmt(e)} ${this.#fmt(f)})">`);
+  }
+
+  /** @inheritdoc */
+  fillBackground() {
+    // No-op: background colour is set via setBackgroundColour() and emitted in getOutput()
+  }
+
+  // --- High-level drawing ---
+
+  /** @inheritdoc */
+  drawShape(points, options = {}) {
+    if (!points.length) return;
+    const pathD = this.#buildPathD(points, options.closed);
+
+    const doStroke = options.stroke !== false;
+    const doFill = options.fill === true;
+    const doClip = options.clip === true;
+
+    if (doClip) return; // clip is a screen-only operation; no-op in SVG export
+
+    const strokeAttrs = doStroke ?
+      `stroke="${this.#colourStr()}" stroke-width="${this.#fmt(this.#currentLineWidth)}"${this.#dashAttrs()}` :
+      'stroke="none"';
+
+    let fillAttrs = doFill ? `fill="${this.#colourStr()}"` : 'fill="none"';
+    if (doFill && options.fillRule) fillAttrs += ` fill-rule="${options.fillRule}"`;
+    if (doFill && options.alpha !== undefined && options.alpha !== 1) {
+      fillAttrs += ` fill-opacity="${options.alpha}"`;
+    }
+
+    this.#emit(`<path d="${pathD}" ${strokeAttrs} ${fillAttrs}/>`);
+  }
+
+  /** @inheritdoc */
+  drawText(characters, fontName, height) {
+    if (!characters || !characters.length) return;
+    const colour = this.#colourStr();
+    for (const ch of characters) {
+      const deg = (ch.rotation ?? 0) * 180 / Math.PI;
+      // translate to position in scene Y-up, then scale(1,-1) to un-flip the glyph
+      // (the parent Y-flip group inverts it), then rotate (negated: scale(1,-1) inverts
+      // rotation direction so -deg in this context = +ch.rotation CCW in scene).
+      // TODO: handle ch.upsideDownOffset and ch.backwardsOffset for mirrored text variants.
+      const transform = `translate(${this.#fmt(ch.x)},${this.#fmt(ch.y)}) scale(1,-1) rotate(${this.#fmt(-deg)})`;
+      this.#emit(`<text transform="${transform}" font-family="${fontName}" font-size="${this.#fmt(height)}" fill="${colour}" stroke="none">${this.#escapeXml(ch.char)}</text>`);
+    }
+  }
+
+  /** @inheritdoc */
+  tracePath(points) {
+    const d = this.#buildPathD(points, false);
+    this.#currentPath = this.#currentPath !== null ? `${this.#currentPath} ${d}` : d;
+  }
+
+  /** @inheritdoc */
+  drawSegments(segments, dashes = []) {
+    if (!segments.length) return;
+    const colour = this.#colourStr();
+    const sw = this.#fmt(this.#currentLineWidth);
+
+    if (!dashes.length) {
+      // Solid: batch all segments into one path element
+      let d = '';
+      for (const seg of segments) {
+        d += `M ${this.#fmt(seg.x1)} ${this.#fmt(seg.y1)} L ${this.#fmt(seg.x2)} ${this.#fmt(seg.y2)} `;
+      }
+      this.#emit(`<path d="${d.trim()}" stroke="${colour}" stroke-width="${sw}" fill="none"/>`);
+    } else {
+      // Dashed: one path per segment with its own dashPhase to preserve dash continuity
+      const dashStr = dashes.map((v) => this.#fmt(v)).join(',');
+      for (const seg of segments) {
+        const phase = this.#fmt(seg.dashPhase ?? 0);
+        this.#emit(`<path d="M ${this.#fmt(seg.x1)} ${this.#fmt(seg.y1)} L ${this.#fmt(seg.x2)} ${this.#fmt(seg.y2)}" stroke="${colour}" stroke-width="${sw}" stroke-dasharray="${dashStr}" stroke-dashoffset="${phase}" fill="none"/>`);
+      }
+    }
+  }
+
+  // --- Low-level path ---
+
+  /** @inheritdoc */
+  beginPath() {
+    this.#currentPath = null;
+  }
+
+  /** @inheritdoc */
+  closePath() {
+    if (this.#currentPath !== null) this.#currentPath += ' Z';
+  }
+
+  /** @inheritdoc */
+  stroke() {
+    if (this.#currentPath === null) return;
+    const colour = this.#colourStr();
+    const sw = this.#fmt(this.#currentLineWidth);
+    this.#emit(`<path d="${this.#currentPath}" stroke="${colour}" stroke-width="${sw}"${this.#dashAttrs()} fill="none"/>`);
+    this.#currentPath = null;
+  }
+
+  /** @inheritdoc */
+  applyPath(options = {}) {
+    if (this.#currentPath === null) return;
+    const { stroke = true, fill = false, fillRule, alpha = 1 } = options;
+    const strokeAttrs = stroke ?
+      `stroke="${this.#colourStr()}" stroke-width="${this.#fmt(this.#currentLineWidth)}"${this.#dashAttrs()}` :
+      'stroke="none"';
+    let fillAttrs = fill ? `fill="${this.#colourStr()}"` : 'fill="none"';
+    if (fill && fillRule) fillAttrs += ` fill-rule="${fillRule}"`;
+    if (fill && alpha !== 1) fillAttrs += ` fill-opacity="${this.#fmt(alpha)}"`;
+    this.#emit(`<path d="${this.#currentPath}" ${strokeAttrs} ${fillAttrs}/>`);
+    this.#currentPath = null;
+  }
+
+  // --- State ---
+
+  /** @inheritdoc */
+  setColour(rgb) {
+    this.#currentColour = this.applyStyle(rgb);
+  }
+
+  /** @inheritdoc */
+  setLineWidth(width) {
+    this.#currentLineWidth = width;
+  }
+
+  /** @inheritdoc */
+  setDash(array, offset = 0) {
+    this.#currentDash = array;
+    this.#currentDashOffset = offset;
+  }
+
+  /** @inheritdoc */
+  setHighlight() {
+    // No-op: SVG export does not render hover/selection highlights.
+  }
+
+  // --- Transform ---
+
+  /** @inheritdoc */
+  applyTransform({ x = 0, y = 0, rotation = 0 } = {}) {
+    const deg = rotation * 180 / Math.PI;
+    const transform = `translate(${this.#fmt(x)},${this.#fmt(y)}) rotate(${this.#fmt(deg)})`;
+    // Retroactively apply the transform to the innermost plain <g> (emitted by save()).
+    // This mirrors canvas/cairo semantics where applyTransform modifies the current
+    // graphics state rather than opening a new save/restore scope.
+    for (let i = this.#elements.length - 1; i >= 0; i--) {
+      if (this.#elements[i] === '<g>') {
+        this.#elements[i] = `<g transform="${transform}">`;
+        return;
+      }
+    }
+    // Fallback: no plain <g> found — open a new one (shouldn't happen in normal usage)
+    this.#emit(`<g transform="${transform}">`);
+  }
+
+  /** @inheritdoc */
+  save() {
+    this.#emit('<g>');
+  }
+
+  /** @inheritdoc */
+  restore() {
+    this.#emit('</g>');
+  }
+
+  // --- Measurement ---
+
+  /** @inheritdoc */
+  measureText(str, fontName, height) {
+    return { width: Text.getApproximateWidth(str, height) };
+  }
+
+  /** @inheritdoc */
+  measureCharWidth(character) {
+    return Text.getApproximateWidth(character, 1);
+  }
+
+  // --- SVG output ---
+
+  /**
+   * Serialise the accumulated elements into a complete SVG document string.
+   * Write to disk via `fs.writeFileSync(path, output, 'utf8')` (Node) or
+   * `Gio.File.replace_contents(new TextEncoder().encode(output), ...)` (GJS).
+   * @return {string}
+   */
+  getOutput() {
+    // Count unclosed <g> groups in #elements so getOutput() can close them.
+    let openGroups = 0;
+    for (const el of this.#elements) {
+      if (/^<g[\s>]/.test(el)) openGroups++;
+      else if (el === '</g>') openGroups--;
+    }
+
+    const parts = [
+      '<?xml version="1.0" encoding="UTF-8"?>',
+      `<svg xmlns="http://www.w3.org/2000/svg" width="${this.#pageWidth}" height="${this.#pageHeight}" viewBox="0 0 ${this.#pageWidth} ${this.#pageHeight}">`,
+    ];
+
+    // Background rect emitted before Y-flip group (already in SVG Y-down coords)
+    const bg = this.getBackgroundColour();
+    if (bg) {
+      const { r, g, b } = bg;
+      parts.push(`<rect x="0" y="0" width="${this.#pageWidth}" height="${this.#pageHeight}" fill="rgb(${r},${g},${b})" stroke="none"/>`);
+    }
+
+    // Y-flip group: converts Y-up scene coordinates to SVG Y-down
+    parts.push(`<g transform="translate(0,${this.#pageHeight}) scale(1,-1)">`);
+    parts.push(...this.#elements);
+
+    // Close any groups that were opened during drawing but not explicitly closed
+    for (let i = 0; i < openGroups; i++) parts.push('</g>');
+
+    parts.push('</g>'); // close Y-flip group
+    parts.push('</svg>');
+
+    return parts.join('\n');
+  }
+
+  // --- Private helpers ---
+
+  /**
+   * Build an SVG path `d` string from bulge-encoded points.
+   * Straight segments use L; arc segments use the native A command.
+   * @param {Array}   points
+   * @param {boolean} [closed=false]
+   * @return {string}
+   */
+  #buildPathD(points, closed = false) {
+    if (!points.length) return '';
+    let d = `M ${this.#fmt(points[0].x)} ${this.#fmt(points[0].y)}`;
+    for (let i = 0; i < points.length - 1; i++) {
+      const p = points[i];
+      const next = points[i + 1];
+      if (!p.bulge) {
+        d += ` L ${this.#fmt(next.x)} ${this.#fmt(next.y)}`;
+      } else {
+        const radius = p.bulgeRadius(next);
+        const largeArc = Math.abs(p.bulge) > 1 ? 1 : 0;
+        // Inside the Y-up local coordinate system (Y-flip group):
+        // sweep=1 (positive-angle direction = CCW in Y-up) corresponds to bulge > 0.
+        const sweep = p.bulge > 0 ? 1 : 0;
+        d += ` A ${this.#fmt(radius)} ${this.#fmt(radius)} 0 ${largeArc} ${sweep} ${this.#fmt(next.x)} ${this.#fmt(next.y)}`;
+      }
+    }
+    if (closed) d += ' Z';
+    return d;
+  }
+
+  /** @return {string} Current colour as an SVG rgb() string. */
+  #colourStr() {
+    const { r, g, b } = this.#currentColour;
+    return `rgb(${r},${g},${b})`;
+  }
+
+  /** @return {string} Current dash state as SVG stroke-dasharray/offset attributes, or ''. */
+  #dashAttrs() {
+    if (!this.#currentDash.length) return '';
+    const dashStr = this.#currentDash.map((v) => this.#fmt(v)).join(',');
+    return ` stroke-dasharray="${dashStr}" stroke-dashoffset="${this.#fmt(this.#currentDashOffset)}"`;
+  }
+
+  /**
+   * Format a number for SVG: integers emit as-is; floats use up to 4 decimal
+   * places with trailing zeros stripped.
+   * @param {number} n
+   * @return {string}
+   */
+  #fmt(n) {
+    if (Number.isInteger(n)) return String(n);
+    return n.toFixed(4).replace(/\.?0+$/, '');
+  }
+
+  /**
+   * Escape a string for safe use as SVG text content.
+   * @param {string|number} value
+   * @return {string}
+   */
+  #escapeXml(value) {
+    return String(value)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+  }
+
+  /**
+   * Append a raw string to the element list.
+   * @param {string} str
+   */
+  #emit(str) {
+    this.#elements.push(str);
+  }
+}

package/core/lib/scene.js

@@ -8,7 +8,7 @@ import { Headers } from './headers.js';
 
 import { DesignCore } from '../designCore.js';
 import { BlockManager } from '../tables/blockManager.js';
-import { AddState, StateManager, UpdateState } from './stateManager.js';
+import { AddState, StateManager, UpdateState, ReplaceState } from './stateManager.js';
 
 /**
  * Scene Class
@@ -25,7 +25,8 @@ export class Scene {
     this.blockManager = new BlockManager();
 
     this.entities = new EntityManager();
-    this.tempEntities = new EntityManager(false);
+    this.previewEntities = new EntityManager(false);
+    this.hoverEntities = new EntityManager(false);
     this.auxiliaryEntities = new EntityManager(false);
 
     this.stateManager = new StateManager();
@@ -44,13 +45,15 @@ export class Scene {
   /** Clear the scene of all items */
   clear() {
     this.entities.clear();
-    this.tempEntities.clear();
+    this.previewEntities.clear();
+    this.hoverEntities.clear();
     this.auxiliaryEntities.clear();
   }
 
   /** Reset the scene */
   reset() {
-    this.tempEntities.clear();
+    this.previewEntities.clear();
+    this.hoverEntities.clear();
     this.auxiliaryEntities.clear();
     this.selectionManager.reset();
     DesignCore.Canvas.requestPaint();
@@ -84,7 +87,7 @@ export class Scene {
       this.reset();
       return;
     }
-    // Create a new item, send it the points array
+    // Create a new item from plain data
     const item = DesignCore.CommandManager.createNew(type, data);
 
     if (typeof index === 'undefined') {
@@ -103,6 +106,25 @@ export class Scene {
     return index;
   }
 
+  /**
+   * Add an already-constructed entity to the scene.
+   * Used by the input manager where the entity is built interactively;
+   * skips createNew so EntityProperties values are preserved.
+   * @param {Entity} entity - constructed entity instance
+   * @param {number} index - if provided, replaces the entity at that index
+   * @return {number} index of the added or replaced entity
+   */
+  commitEntity(entity, index = undefined) {
+    if (typeof index === 'undefined') {
+      this.commit([new AddState(entity)]);
+      return this.entities.count() - 1;
+    } else {
+      const existingItem = this.entities.get(index);
+      this.commit([new ReplaceState(existingItem, entity)]);
+      return index;
+    }
+  }
+
   /**
    * Commit state changes to the scene
    * @param {Array} stateChanges

package/core/lib/selectionManager.js

@@ -1,6 +1,6 @@
 import { Utils } from './utils.js';
 import { Point } from '../entities/point.js';
-import { SelectionWindow } from './selectionWindow.js';
+import { SelectionWindow } from './auxiliary/selectionWindow.js';
 import { DesignCore } from '../designCore.js';
 
 /** SingleSelection Class */
@@ -215,7 +215,7 @@ export class SelectionManager {
 
     // Add all selectable items to the selection
     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('layer'));
 
       // Only select items on selectable layers
       if (layer?.isSelectable) {

package/core/lib/settings.js

@@ -6,8 +6,10 @@ export class Settings {
   constructor() {
     this.canvasbackgroundcolour = { r: 30, g: 30, b: 30 };
     this.gridcolour = { r: 119, g: 118, b: 123 };
-    this.selecteditemscolour = { r: 0, g: 255, b: 0 };
-    this.snaptrackingcolour = { r: 55, g: 180, b: 75 };
+    this.accentcolour = { r: 55, g: 180, b: 75 };
+    this.rubberbandcolour = { r: 225, g: 180, b: 30 };
+    // previewSettings
+    this.previewBlendFactor = 0.8; // how much to blend preview entities with the background (0-1)
     // selectionWindow and crossingWindow colours
     this.selectionWindow = { r: 0, g: 255, b: 0 };
     this.crossingWindow = { r: 0, g: 0, b: 255 };

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;