@design-core/core 0.0.1 → 0.0.3

package/core/lib/selectionWindow.js

@@ -1,20 +1,25 @@
-import {Point} from '../entities/point.js';
-import {Colours} from './colours.js';
-
+import { DesignCore } from '../designCore.js';
+import { Point } from '../entities/point.js';
+import { Colours } from './colours.js';
 
+/** SelectionWindow Class */
 export class SelectionWindow {
+  /**
+   * Create a SelectionWindow
+   * @param {Object} data
+   */
   constructor(data) {
-    this.colour = '#FF0000';
+    this.colour = DesignCore.Settings.selectionWindow;
     this.lineWidth = 1;
     this.dashPattern = [];
 
     if (data) {
-      if (data.points) {
+      if (data.hasOwnProperty('points')) {
         if (data.points[1].y > data.points[0].y) {
-          this.colour = '#FF0000';
+          this.colour = DesignCore.Settings.selectionWindow;
           this.dashPattern = [5];
         } else {
-          this.colour = '#0000FF';
+          this.colour = DesignCore.Settings.crossingWindow;
         }
 
         this.points = [];
@@ -27,7 +32,11 @@ export class SelectionWindow {
     }
   }
 
-
+  /**
+   * Draw the entity
+   * @param {Object} ctx - context
+   * @param {number} scale
+   */
   draw(ctx, scale) {
     const colour = this.colour;
     ctx.fillStyle = colour;
@@ -35,7 +44,8 @@ export class SelectionWindow {
     const scaledPattern = this.dashPattern.map((x) => x / scale);
 
     try { // HTML Canvas
-      ctx.strokeStyle = colour;
+      ctx.strokeStyle = Colours.rgbToString(colour);
+      ctx.fillStyle = Colours.rgbToString(colour);
       ctx.lineWidth = this.lineWidth / scale;
       ctx.beginPath();
       ctx.globalAlpha = 0.2;
@@ -48,7 +58,7 @@ export class SelectionWindow {
       ctx.stroke();
     } catch { // Cairo
       ctx.setLineWidth(this.lineWidth / scale);
-      const rgbColour = Colours.hexToScaledRGB(colour);
+      const rgbColour = Colours.rgbToScaledRGB(colour);
       ctx.setSourceRGBA(rgbColour.r, rgbColour.g, rgbColour.b, 0.2);
       this.drawRect(ctx);
       ctx.fillPreserve();
@@ -59,6 +69,10 @@ export class SelectionWindow {
     }
   }
 
+  /**
+   * Draw a rectangle
+   * @param {Object} ctx
+   */
   drawRect(ctx) {
     ctx.moveTo(this.points[0].x, this.points[0].y);
     ctx.lineTo(this.points[1].x, this.points[0].y);

package/core/lib/settings.js

@@ -1,16 +1,17 @@
-import {DesignCore} from '../designCore.js';
+import { DesignCore } from '../designCore.js';
 
+/** Settings Class */
 export class Settings {
-  /**
-   * Settings Constructor
-   */
+  /** Create Setting */
   constructor() {
-    this.canvasbackgroundcolour = '#1e1e1e'; // "#000000";
-    this.selecteditemscolour = '#00FF00';
-    this.snapcolour = '#FF0000';
-    this.gridcolour = '#77767b';
-    this.helpergeometrycolour = '#00BFFF';
-    this.polarsnapcolour = '#38B44A';
+    this.canvasbackgroundcolour = { r: 30, g: 30, b: 30 };
+    this.selecteditemscolour = { r: 0, g: 255, b: 0 };
+    this.snapcolour = { r: 255, g: 0, b: 0 };
+    this.gridcolour = { r: 119, g: 118, b: 123 };
+    this.helpergeometrycolour = { r: 0, g: 195, b: 255 };
+    this.polarsnapcolour = { r: 55, g: 180, b: 75 };
+    this.selectionWindow = { r: 0, g: 255, b: 0 };
+    this.crossingWindow = { r: 0, g: 0, b: 255 };
     // fontSettings
     this.font = 'Arial';
     this.fontupsidedown = false;
@@ -36,6 +37,12 @@ export class Settings {
     // TODO: Check setting is valid
     this[setting] = value;
 
+    // polar and ortho are mutually exclusive — enabling one disables the other
+    if (value === true) {
+      if (setting === 'polar') this.ortho = false;
+      else if (setting === 'ortho') this.polar = false;
+    }
+
     if (DesignCore.instance) {
       DesignCore.Canvas.requestPaint();
     }
@@ -44,7 +51,7 @@ export class Settings {
   /**
    * Returns the value of the setting
    * @param {string} setting
-   * @returns
+   * @return {string}
    */
   getSetting(setting) {
     // TODO: Validate setting exists

package/core/lib/snapping.js

@@ -1,24 +1,34 @@
 
-import {Point} from '../entities/point.js';
-import {Colours} from './colours.js';
-import {Utils} from './utils.js';
+import { Point } from '../entities/point.js';
+import { Colours } from './colours.js';
+import { Utils } from './utils.js';
 
-import {DesignCore} from '../designCore.js';
+import { DesignCore } from '../designCore.js';
 
+/** SnapPoint Class */
 class SnapPoint {
+  /**
+   * Create SnapPoint
+   * @param {Point} snapPoint
+   */
   constructor(snapPoint) {
     this.snapPoint = snapPoint;
   }
 
+  /**
+   * Draw the entity
+   * @param {Object} ctx - context
+   * @param {number} scale
+   */
   draw(ctx, scale) {
-    const snapColour = DesignCore.Settings.snapcolour.toString();
+    const snapColour = DesignCore.Settings.snapcolour;
     const radius = 4;
 
     try { // HTML Canvas
-      ctx.strokeStyle = snapColour;
+      ctx.fillStyle = Colours.rgbToString(snapColour);
       ctx.beginPath();
     } catch { // Cairo
-      const rgbColour = Colours.hexToScaledRGB(snapColour);
+      const rgbColour = Colours.rgbToScaledRGB(snapColour);
       ctx.setSourceRGB(rgbColour.r, rgbColour.g, rgbColour.b);
     }
 
@@ -27,14 +37,103 @@ class SnapPoint {
   }
 }
 
+/** 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);
+
+    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.polarsnapcolour;
+    const dashSize = 4 / scale;
+
+    ctx.save();
+
+    try { // HTML Canvas
+      ctx.beginPath();
+      ctx.strokeStyle = Colours.rgbToString(lineColour);
+      ctx.lineWidth = 1 / scale;
+      ctx.setLineDash([dashSize, dashSize]);
+    } catch { // Cairo
+      const rgbColour = Colours.rgbToScaledRGB(lineColour);
+      ctx.setSourceRGB(rgbColour.r, rgbColour.g, rgbColour.b);
+      ctx.setLineWidth(1 / scale);
+      ctx.setDash([dashSize, dashSize], 0);
+    }
+
+    ctx.moveTo(start.x, start.y);
+    ctx.lineTo(end.x, end.y);
+    ctx.stroke();
+
+    ctx.restore();
+  }
+}
+
+/** Snapping Class */
 export class Snapping {
+  /** Create snapping */
   constructor() {
     this.active = false;
   }
 
   /**
    * Get snap point and draw to the scene
-   * @returns Point or undefined
+   * @return {Point} or undefined
    */
   snap() {
     if (this.active) {
@@ -54,28 +153,37 @@ export class Snapping {
    */
   addSnapPoint(snapPoint) {
     // show the snap point
-    DesignCore.Scene.addToAuxiliaryItems(new SnapPoint(snapPoint));
+    DesignCore.Scene.auxiliaryEntities.add(new SnapPoint(snapPoint));
 
     // Move the mouse to the closest snap point so if the mouse if clicked the snap point is used.
     DesignCore.Mouse.setPosFromScenePoint(snapPoint);
   }
 
+  /**
+   * Add a tracking line for polar/ortho snap to the scene
+   * @param {Point} inputPoint - previous input point the line passes through
+   * @param {Point} snapPoint - current snapped mouse position (defines direction)
+   */
+  addTrackingLine(inputPoint, snapPoint) {
+    DesignCore.Scene.auxiliaryEntities.add(new TrackingLine(inputPoint, snapPoint));
+  }
+
   /**
    * Get the closest snap point
-   * @returns Point or undefined
+   * @return {Point} or undefined
    */
   getSnapPoint() {
     let snapPoint;
     let delta = 25 / DesignCore.Canvas.getScale(); // find a more suitable starting value
 
-    for (let i = 0; i <DesignCore.Scene.items.length; i++) {
-      const layer = DesignCore.LayerManager.getStyleByName(DesignCore.Scene.items[i].layer);
+    for (let i = 0; i < DesignCore.Scene.entities.count(); i++) {
+      const layer = DesignCore.LayerManager.getItemByName(DesignCore.Scene.entities.get(i).layer);
 
-      if (!layer.isVisible) {
+      if (!layer?.isVisible) {
         continue;
       }
 
-      const itemSnaps = DesignCore.Scene.items[i].snaps(DesignCore.Mouse.pointOnScene(), delta); // get an array of snap point from the item
+      const itemSnaps = DesignCore.Scene.entities.get(i).snaps(DesignCore.Mouse.pointOnScene(), delta); // get an array of snap point from the item
       if (itemSnaps) {
         for (let j = 0; j < itemSnaps.length; j++) {
           const length = itemSnaps[j].distance(DesignCore.Mouse.pointOnScene());
@@ -93,7 +201,7 @@ export class Snapping {
   /**
    * Get the polar snap point from the current mouse position
    * @param {Point} previousPoint
-   * @returns Point or undefined
+   * @return {Point} or undefined
    */
   polarSnap(previousPoint) {
     if (!this.active) {
@@ -120,7 +228,7 @@ export class Snapping {
   /**
    * Get the ortho snap point from the current mouse position
    * @param {Point} previousPoint
-   * @returns Point or undefined
+   * @return {Point} or undefined
    */
   orthoSnap(previousPoint) {
     if (!this.active) {
@@ -128,13 +236,13 @@ export class Snapping {
     }
 
     let snapPoint;
-    const x = DesignCore.Mouse.pointOnScene().x - previousPoint.x;
-    const y = DesignCore.Mouse.pointOnScene().y - previousPoint.y;
+    const mousePoint = DesignCore.Mouse.pointOnScene();
+    const delta = mousePoint.subtract(previousPoint);
 
-    if (Math.abs(x) > Math.abs(y)) {
-      snapPoint = new Point(DesignCore.Mouse.pointOnScene().x, previousPoint.y);
+    if (Math.abs(delta.x) > Math.abs(delta.y)) {
+      snapPoint = new Point(mousePoint.x, previousPoint.y);
     } else {
-      snapPoint = new Point(previousPoint.x, DesignCore.Mouse.pointOnScene().y);
+      snapPoint = new Point(previousPoint.x, mousePoint.y);
     }
     return snapPoint;
   }

package/core/lib/stateManager.js

@@ -0,0 +1,288 @@
+/**
+ * State Manager Class
+ * Manages the history of states for undo/redo functionality
+ *
+ * The design of this class is based on a command design pattern.
+ * The commands consist of Add, Remove and Update.
+ * Each command has a do() and undo() method to perform and revert the action respectively.
+ */
+export class StateManager {
+  #history = [];
+  #historyIndex = 0;
+  #maxHistoryStates = 10;
+  #isModified = false;
+
+  /**
+   * Create StateManager
+   * @param {EntityManager} entityManager
+   */
+  constructor() {
+    this.stateCallbackFunction;
+  }
+
+  /**
+   * Add a new state to the history
+   * state: instance of State (AddState, RemoveState, UpdateState)
+   * @param {State} state
+   * */
+  addState(state) {
+    // Remove all future states
+    if (this.#historyIndex < this.#history.length && this.#historyIndex !== -1) {
+      this.#history.splice(this.#historyIndex);
+    }
+
+    // Add the new state and increment the index
+    this.#history.push(state);
+    this.#historyIndex++;
+
+    this.limitHistory();
+  }
+
+  /** Limit the history to the maximum number of states */
+  limitHistory() {
+    while (this.#history.length > this.#maxHistoryStates) {
+      this.#history.shift();
+      this.#historyIndex--;
+    }
+  }
+
+  /**
+   * Get the previous state
+   * @return {State}
+   * */
+  getPreviousState() {
+    return this.#history[this.#historyIndex - 1];
+  }
+
+  /**
+   * Get the current state
+   * @return {State}
+   * */
+  getCurrentState() {
+    return this.#history[this.#historyIndex];
+  }
+
+  /**
+   * Get the next state
+   * @return {State}
+   * */
+  getNextState() {
+    return this.#history[this.#historyIndex + 1];
+  }
+
+  /** Clear the history */
+  clearHistory() {
+    this.#history = [];
+    this.#historyIndex = 0;
+  }
+
+  /**
+   * Get the length of the history
+   * @return {number}
+   * */
+  getHistoryLength() {
+    return this.#history.length;
+  }
+
+  /**
+   * Commit a set of state changes
+   * @param {EntityManager} entityManger
+   * @param {Array} stateChanges
+   */
+  commit(entityManger, stateChanges) {
+    const state = new State(entityManger, stateChanges);
+    this.addState(state);
+    state.do();
+    this.stateChanged();
+  }
+
+  /** Undo the last action */
+  undo() {
+    const lastState = this.getPreviousState();
+
+    if (lastState) {
+      lastState.undo();
+      this.#historyIndex--;
+      this.stateChanged();
+    }
+  }
+
+  /** Redo the last undone action */
+  redo() {
+    if (this.#historyIndex < this.#history.length) {
+      const currentState = this.getCurrentState();
+
+      if (currentState) {
+        currentState.do();
+        this.#historyIndex++;
+        this.stateChanged();
+      }
+    }
+  }
+
+  /**
+   * Check if undo is possible
+   * @return {boolean} true if undo is possible
+   * */
+  canUndo() {
+    return this.#historyIndex > 0;
+  }
+
+  /**
+   * Check if redo is possible
+   * @return {boolean} true if redo is possible
+   * */
+  canRedo() {
+    return this.#historyIndex < this.#history.length;
+  }
+
+  /** Get the modified state */
+  get isModified() {
+    return this.#isModified;
+  }
+
+  /**
+   * Set the state changed callback function
+   * @param {function} callback
+   */
+  setStateCallbackFunction(callback) {
+    this.stateCallbackFunction = callback;
+  }
+
+  /**
+   * Set the modified state
+   * @param {boolean} isModified
+   */
+  stateChanged(isModified=true) {
+    this.#isModified = isModified;
+
+    if (this.stateCallbackFunction) {
+      this.stateCallbackFunction();
+    }
+  }
+}
+
+/** Base State Class */
+class State {
+  /**
+   * Create State
+   * @param {EntityManager} entityManager
+   * @param {Array} stateChanges
+   * */
+  constructor(entityManager, stateChanges) {
+    this.entityManager = entityManager;
+    this.stateChanges = stateChanges;
+    this.undoStateChanges = [];
+  }
+
+  /** Perform the state changes */
+  do() {
+    this.undoStateChanges = [];
+    for (const stateChange of this.stateChanges) {
+      if (stateChange instanceof AddState) {
+        this.entityManager.add(stateChange.entity);
+        const undoStateChange = new RemoveState(stateChange.entity, {});
+        this.undoStateChanges.push(undoStateChange);
+      }
+
+      if (stateChange instanceof RemoveState) {
+        const index = this.entityManager.indexOf(stateChange.entity);
+        if (index !== -1) {
+          this.entityManager.remove(index);
+          const undoStateChange = new AddState(stateChange.entity, {});
+          this.undoStateChanges.push(undoStateChange);
+        }
+      }
+
+      if (stateChange instanceof UpdateState) {
+        const index = this.entityManager.indexOf(stateChange.entity);
+        if (index !== -1) {
+          // capture previous properties for undo
+          const previousProperties = {};
+          for (const prop of Object.getOwnPropertyNames(stateChange.properties)) {
+            previousProperties[prop] = stateChange.entity[prop];
+          }
+          const undoStateChange = new UpdateState(stateChange.entity, previousProperties);
+          this.undoStateChanges.push(undoStateChange);
+
+          this.entityManager.update(index, stateChange.properties);
+        }
+      }
+    }
+  }
+
+  /** Undo the state changes */
+  undo() {
+    for (const stateChange of this.undoStateChanges) {
+      if (stateChange instanceof AddState) {
+        this.entityManager.add(stateChange.entity);
+      }
+
+      if (stateChange instanceof RemoveState) {
+        const index = this.entityManager.indexOf(stateChange.entity);
+        if (index !== -1) {
+          this.entityManager.remove(index);
+        }
+      }
+
+      if (stateChange instanceof UpdateState) {
+        const index = this.entityManager.indexOf(stateChange.entity);
+        if (index !== -1) {
+          this.entityManager.update(index, stateChange.properties);
+        }
+      }
+    }
+  }
+}
+
+
+/**
+ * State Change Base Class
+ * Holds an entity and the properties to be changed
+ */
+class StateChange {
+  /**
+   * Create a state change
+   * @param {object} entity
+   * @param {object} properties
+   */
+  constructor(entity, properties) {
+    this.entity = entity;
+    this.properties = properties;
+  }
+}
+
+/** Add State Class */
+export class AddState extends StateChange {
+  /**
+   * Create Add State
+   * @param {object} entity
+   * @param {object} properties
+   */
+  constructor(entity, properties={}) {
+    super(entity, properties);
+  }
+}
+
+/** Remove State Class */
+export class RemoveState extends StateChange {
+  /** Create Remove State
+   * @param {object} entity
+   * @param {object} properties
+   */
+  constructor(entity, properties={}) {
+    super(entity, properties);
+  }
+}
+
+/** Update State Class */
+export class UpdateState extends StateChange {
+  /**
+   * Create Update State
+   * @param {object} entity
+   * @param {object} properties
+   */
+  constructor(entity, properties) {
+    super(entity, properties);
+  }
+}