@design-core/core 0.0.1 → 0.0.3

package/core/lib/boundingBox.js

@@ -1,6 +1,12 @@
-import {Point} from '../entities/point.js';
+import { Point } from '../entities/point.js';
 
+/** BoundingBox Class */
 export class BoundingBox {
+  /**
+   * Create BoundingBox
+   * @param {Point} firstCorner
+   * @param {Point} secondCorner
+   */
   constructor(firstCorner = new Point(), secondCorner = new Point()) {
     this.pt1 = firstCorner;
     this.pt2 = secondCorner;
@@ -48,9 +54,32 @@ export class BoundingBox {
     return this.yMax - this.yMin;
   }
 
+  /**
+   * return bounding box center point
+   */
+  get centerPoint() {
+    return new Point(this.xMin + this.xLength / 2, this.yMin + this.yLength / 2);
+  }
+
+  /**
+   * Determine if point is inside bounding box
+   * @param {Object} point
+   * @return {boolean} true if point is inside false if not
+   */
+  isInside(point) {
+    // get bounding box corners
+    const bottomLeft = new Point(this.xMin, this.yMin);
+    const bottomRight = new Point(this.xMax, this.yMin);
+    const topRight = new Point(this.xMax, this.yMax);
+    const topLeft = new Point(this.xMin, this.yMax);
+    // check if point is in rectangle
+    return point.isInRectangle(bottomLeft, bottomRight, topRight, topLeft);
+  }
+
   /**
    * Return the bounding box for points
    * @param {Array} points
+   * @return {BoundingBox}
    */
   static fromPoints(points) {
     if (!points.length) {
@@ -64,25 +93,56 @@ export class BoundingBox {
     return new BoundingBox(new Point(xMin, yMin), new Point(xMax, yMax));
   }
 
+  /**
+   * Generate bounding box from entities
+   * @param {Array} entities
+   * @return {BoundingBox}
+   */
+  static fromEntities(entities) {
+    if (!entities.length) {
+      return;
+    }
+
+    let xmin = Infinity;
+    let xmax = -Infinity;
+    let ymin = Infinity;
+    let ymax = -Infinity;
+
+    for (const ent of entities) {
+      const bbox = ent.boundingBox();
+
+      if (!bbox) {
+        continue;
+      }
+
+      xmin = Math.min(xmin, bbox.xMin);
+      xmax = Math.max(xmax, bbox.xMax);
+      ymin = Math.min(ymin, bbox.yMin);
+      ymax = Math.max(ymax, bbox.yMax);
+    }
+
+    return new BoundingBox(new Point(xmin, ymin), new Point(xmax, ymax));
+  }
+
   /**
    * Calculate the boundingbox for a line
-   * @param {point} startPoint
-   * @param {point} endPoint
-   * @returns - BoundingBox
+   * @param {Point} startPoint
+   * @param {Point} endPoint
+   * @return {BoundingBox}
    */
-  static lineBoundingBox( startPoint, endPoint) {
+  static lineBoundingBox(startPoint, endPoint) {
     return new BoundingBox(startPoint, endPoint);
   }
 
   /**
    * Calculate the boundingbox for an arc
-   * @param {point} centerPoint
-   * @param {point} startPoint
-   * @param {point} endPoint
+   * @param {Point} centerPoint
+   * @param {Point} startPoint
+   * @param {Point} endPoint
    * @param {number} direction - ccw > 0, cw < 0
-   * @returns - BoundingBox
+   * @return {BoundingBox}
    */
-  static arcBoundingBox(centerPoint, startPoint, endPoint, direction=1) {
+  static arcBoundingBox(centerPoint, startPoint, endPoint, direction = 1) {
     const startAngle = centerPoint.angle(startPoint);
     const endAngle = centerPoint.angle(endPoint);
     const radius = centerPoint.distance(startPoint);
@@ -122,12 +182,12 @@ export class BoundingBox {
    * @param {number} endAngle - angle in radians
    * @param {number} axisAngle - angle in radians. i.e 90 deg = Math.PI / 2.
    * @param {number} direction - ccw > 0, cw < 0
-   * @returns bool
+   * @return {boolean}
    */
-  static crossesAxis(startAngle, endAngle, axisAngle, direction=1) {
+  static crossesAxis(startAngle, endAngle, axisAngle, direction = 1) {
     const circle = Math.PI * 2;
     const referenceStartAngle = (startAngle - axisAngle + circle) % circle;
-    const referenceEndAngle = (endAngle - axisAngle + circle ) % circle;
+    const referenceEndAngle = (endAngle - axisAngle + circle) % circle;
 
     // if refStartAngle > refEndAngle then the arc crosses the axis
     let crosses = referenceStartAngle >= referenceEndAngle;

package/core/lib/canvas.js

@@ -1,10 +1,16 @@
-import {Matrix} from './matrix.js';
-import {Colours} from './colours.js';
-import {Point} from '../entities/point.js';
+import { Matrix } from './matrix.js';
+import { Colours } from './colours.js';
+import { Point } from '../entities/point.js';
+import { Input } from './input.js';
 
-import {DesignCore} from '../designCore.js';
+import { DesignCore } from '../designCore.js';
 
+/** Canvas Class */
 export class Canvas {
+  #panCursorTimeout;
+  #baseCursorState = 'DEFAULT';
+
+  /** Create Canvas */
   constructor() {
     this.cvs = null;
     this.matrix = new Matrix();
@@ -19,38 +25,101 @@ export class Canvas {
     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;
+    this.#baseCursorState = Input.Cursor.DEFAULT;
+
     // function to call external pain command for the ui
     this.externalPaintCallbackFunction;
+    this.externalCursorCallbackFunction;
   }
 
+  /**
+   * Get canvas scale
+   * @return {number}
+   */
   getScale() {
     return this.matrix.getScale();
   }
 
+  /**
+   * Set external paint callback
+   * This is called when painting is required
+   * @param {Object} callback
+   */
   setExternalPaintCallbackFunction(callback) {
     // set the callback
     this.externalPaintCallbackFunction = callback;
   }
 
-  setCanvasWidget(cnvs) {
-    this.cvs = cnvs;
+  /**
+   * Set external cursor callback
+   * Called when the cursor state changes.
+   * Pass undefined or null to unregister the callback.
+   * @param {Function|undefined|null} callback
+   */
+  setCursorCallbackFunction(callback) {
+    this.externalCursorCallbackFunction = callback;
   }
 
+  /**
+   * Update the cursor state and notify the UI
+   * @param {string} state - one of this.cursorStates
+   */
+  #setCursor(state) {
+    if (this.cursorState === state) return;
+    this.cursorState = state;
+    this.externalCursorCallbackFunction?.(state);
+  }
+
+  /**
+   * Set the cursor based on the input types requested by a command prompt.
+   * If a cursorHint is provided it is used directly; otherwise the cursor is
+   * derived from the cursor property of each type (first non-null wins),
+   * falling back to DEFAULT.
+   * @param {Array} types - array of Input.Type values
+   * @param {string|null} cursorHint - optional override from PromptOptions.cursor
+   */
+  setCursorForInputTypes(types, cursorHint = null) {
+    this.#baseCursorState = cursorHint ??
+      types.map((t) => t.cursor).find(Boolean) ??
+      Input.Cursor.DEFAULT;
+    this.#setCursor(this.#baseCursorState);
+  }
+
+  /**
+   * Handle mouse movement
+   */
   mouseMoved() {
     if (DesignCore.Mouse.buttonTwoDown) {
       this.pan();
+      return;
     }
 
     DesignCore.Scene.inputManager.mouseMoved();
   }
 
+  /**
+   * Handle mouse downs
+   * @param {number} button
+   */
   mouseDown(button) {
     switch (button) {
       case 0: // left button
         break;
       case 1: // middle button
-        // TODO: Reenable cursor styles
-        // ev.target.style.cursor = "move";
+        clearTimeout(this.#panCursorTimeout);
+        this.#panCursorTimeout = setTimeout(() => this.#setCursor(Input.Cursor.GRABBING), 250);
         break;
       case 2: // right button
         break;
@@ -59,14 +128,19 @@ export class Canvas {
     DesignCore.Scene.inputManager.mouseDown(button);
   };
 
+  /**
+   * Handle mouse up
+   * @param {number} button
+   */
   mouseUp(button) {
     switch (button) {
-      case 0: // left buttonbreak;
+      case 0: // left button
+        break;
       case 1: // middle button
+        clearTimeout(this.#panCursorTimeout);
         this.lastDelta = new Point();
         this.requestPaint();
-        // TODO: Reenable cursor styles
-        // ev.target.style.cursor = "crosshair";
+        this.#setCursor(this.#baseCursorState);
         break;
       case 2: // right button
         break;
@@ -75,6 +149,10 @@ export class Canvas {
     DesignCore.Scene.inputManager.mouseUp(button);
   };
 
+  /**
+   * Handle double click
+   * @param {number} button
+   */
   doubleClick(button) {
     switch (button) {
       case 0: // left button
@@ -87,6 +165,9 @@ 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));
@@ -99,13 +180,22 @@ export class Canvas {
     this.requestPaint();
   }
 
+  /**
+   * Handle mouse wheel - Zoom
+   * @param {number} delta
+   */
   wheel(delta) {
+    if (DesignCore.Mouse.buttonTwoDown) return;
     const scale = Math.pow(1 + Math.abs(delta), delta > 0 ? 1 : -1);
     if (scale < 1 && this.getScale() > this.minScaleFactor || scale > 1 && this.getScale() < this.maxScaleFactor) {
       this.zoom(scale);
     }
   };
 
+  /**
+   * Zoom the canvas
+   * @param {number} scale
+   */
   zoom(scale) {
     const zoomPoint = DesignCore.Mouse.pointOnScene();
     this.matrix.scale(scale, scale);
@@ -113,31 +203,50 @@ export class Canvas {
     this.requestPaint();
   }
 
+  /**
+   * Zoom to a window
+   * @param {Point} pt1
+   * @param {Point} pt2
+   */
+  zoomToWindow(pt1, pt2) {
+    const xMin = Math.min(pt1.x, pt2.x);
+    const yMin = Math.min(pt1.y, pt2.y);
+    const xMax = Math.max(pt1.x, pt2.x);
+    const yMax = Math.max(pt1.y, pt2.y);
+
+    const width = xMax - xMin;
+    const height = yMax - yMin;
+
+    if (width === 0 || height === 0) {
+      return;
+    }
+
+    const selectionCenter = new Point(xMin + width / 2, yMin + height / 2);
+    const screenCenter = new Point(this.width / 2, this.height / 2);
+    const translateDelta = DesignCore.Mouse.transformToScene(screenCenter).subtract(selectionCenter);
+    const targetScale = Math.min((this.width / width), (this.height / height));
+    const scaleDelta = targetScale / this.getScale() * 0.9;
+
+    this.matrix.scale(scaleDelta, scaleDelta);
+    this.matrix.translate((selectionCenter.x / scaleDelta) - selectionCenter.x, (selectionCenter.y / scaleDelta) - selectionCenter.y);
+    this.matrix.translate(translateDelta.x / scaleDelta, translateDelta.y / scaleDelta);
+    this.requestPaint();
+  }
+
+  /**
+   * Set the zoom to include all scene items
+   */
   zoomExtents() {
     const extents = DesignCore.Scene.boundingBox();
 
     if (extents) {
-      // calculate the center of all items
-      const selectionCenter = new Point(extents.xMin + (extents.xLength / 2), extents.yMin + (extents.yLength / 2));
-      // get the center of the screen transformed to a scene position
-      const screenCenter = new Point(this.width / 2, this.height / 2);
-      // calculate the translation delta required to center on screen
-      const translateDelta = DesignCore.Mouse.transformToScene(screenCenter).subtract(selectionCenter);
-      // calculate the scale required to fill the screen
-      const targetScale = Math.min((this.width / extents.xLength), (this.height / extents.yLength));
-      // calculate the scale delta required to fill 90% of the screen
-      const scaleDelta = targetScale / this.getScale() * 0.9;
-      // apply scale
-      this.matrix.scale(scaleDelta, scaleDelta);
-      // translate to counteract the scale
-      this.matrix.translate((selectionCenter.x / scaleDelta) - selectionCenter.x, (selectionCenter.y / scaleDelta) - selectionCenter.y);
-      // translate to the center of the screen
-      this.matrix.translate(translateDelta.x / scaleDelta, translateDelta.y / scaleDelta);
-      // request paint to update
-      this.requestPaint();
+      this.zoomToWindow(new Point(extents.xMin, extents.yMin), new Point(extents.xMax, extents.yMax));
     }
   }
 
+  /**
+   * Request the canvas is painted
+   */
   requestPaint() {
     // paint request is passed to an external paint function
     // This function then calls this.paint(), the canvas paint function
@@ -147,6 +256,12 @@ export class Canvas {
     }
   }
 
+  /**
+   * Paint the canvas
+   * @param {object} context
+   * @param {number} width
+   * @param {number} height
+   */
   paint(context, width, height) {
     // This paint request is called by an external paint function
     // some ui framework create and destroy the context for every paint
@@ -163,12 +278,12 @@ export class Canvas {
       this.flipped = true;
     }
 
-    // set the tranform for the 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.setMatrix(this.matrix)
       context.translate(this.matrix.e, this.matrix.f);
       context.scale(this.matrix.a, this.matrix.d);
     }
@@ -179,11 +294,11 @@ export class Canvas {
     // Paint the scene background
     try {// HTML
       // this.clear()
-      context.fillStyle = DesignCore.Settings.canvasbackgroundcolour;
+      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.hexToScaledRGB(DesignCore.Settings.canvasbackgroundcolour);
+      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);
@@ -197,74 +312,140 @@ export class Canvas {
 
     this.paintGrid(context, width, height);
 
+    const scale = this.getScale();
+
     // Paint the primary scene items
-    for (let i = 0; i <DesignCore.Scene.items.length; i++) {
-      const layer = DesignCore.LayerManager.getStyleByName(DesignCore.Scene.items[i].layer);
+    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) {
+      if (!layer?.isVisible) {
         continue;
       }
 
-      this.setContext(DesignCore.Scene.items[i], context);
-      DesignCore.Scene.items[i].draw(context, this.getScale());
+      this.setContext(entity, context, undefined, scale);
+      entity.draw(context, scale);
     }
 
     // Paint the temporary scene items
-    for (let j = 0; j <DesignCore.Scene.tempItems.length; j++) {
-      this.setContext(DesignCore.Scene.tempItems[j], context);
-      DesignCore.Scene.tempItems[j].draw(context, this.getScale());
+    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);
     }
 
     // Paint the selected scene items
-    for (let k = 0; k <DesignCore.Scene.selectionManager.selectedItems.length; k++) {
-      this.setContext(DesignCore.Scene.selectionManager.selectedItems[k], context);
-      DesignCore.Scene.selectionManager.selectedItems[k].draw(context, this.getScale());
+    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 auxiliary scene items
     // auxiliary items include things like the selection window, snap points etc
     // these items have their own draw routine
-    for (let l = 0; l <DesignCore.Scene.auxiliaryItems.length; l++) {
-      DesignCore.Scene.auxiliaryItems[l].draw(context, this.getScale());
+    this.paintState = this.paintStates.AUXILLARY;
+    const auxCount = DesignCore.Scene.auxiliaryEntities.count();
+    for (let l = 0; l < auxCount; l++) {
+      DesignCore.Scene.auxiliaryEntities.get(l).draw(context, scale);
     }
+
+    this.paintState = undefined;
   }
 
   /**
    * Set the scene context
    * @param {entity} item
-   * @param {object} context - scene painting context from ui
-   * @param {string} contextColour - colour to overide item colour
+   * @param {Object} context - scene painting context from ui
+   * @param {Object} block - insert or dimension element for the current block, required for colour ByBlock
    */
-  setContext(item, context) {
-    const colour = item.getColour();
+  setContext(item, context, block = undefined) {
+    const scale = this.getScale();
+    let colour = item.getDrawColour();
     const lineType = item.getLineType();
-    const lineWidth = item.lineWidth / this.getScale();
+    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;
+    }
+
+    if (block && this.paintState != this.paintStates.SELECTED) {
+      // set colour for items with colour byblock
+      if (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;
+      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 = colour;
-      context.fillStyle = colour;
+      context.strokeStyle = Colours.rgbToString(colour);
+      context.fillStyle = Colours.rgbToString(colour);
       context.lineWidth = lineWidth;
-      context.setLineDash(lineType.getPattern(this.getScale()));
+      context.setLineDash(lineType.getPattern(scale));
       context.beginPath();
     } catch { // Cairo
-      const rgbColour = Colours.hexToScaledRGB(colour);
+      const rgbColour = Colours.rgbToScaledRGB(colour);
       context.setSourceRGB(rgbColour.r, rgbColour.g, rgbColour.b);
-      context.setDash(lineType.getPattern(this.getScale()), 1);
+      context.setDash(lineType.getPattern(scale), 1);
       context.setLineWidth(lineWidth);
     }
   }
 
+  /**
+   * 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
+   * @return {boolean}
+   */
+  #isAci7(item, block) {
+    let colour;
+    if (item.entityColour.byBlock && block) {
+      colour = block.entityColour.byLayer ?
+        DesignCore.LayerManager.getItemByName(block.layer)?.layerColour :
+        block.entityColour;
+    } else if (item.entityColour.byLayer) {
+      colour = DesignCore.LayerManager.getItemByName(item.layer)?.layerColour;
+    } else {
+      colour = item.entityColour;
+    }
+    return colour?.aci === 7 && !colour?.isTrueColour;
+  }
+
+  /**
+   * Paint the background grid
+   * @param {object} context
+   */
   paintGrid(context) {
+    const scale = this.getScale();
+
     // TODO: Move grid linewidth to settings?
     let lineWidth = 0.75;
 
     try { // HTML Canvas
-      context.strokeStyle = DesignCore.Settings.gridcolour;
-      context.lineWidth = lineWidth / this.getScale();
+      context.strokeStyle = Colours.rgbToString(DesignCore.Settings.gridcolour);
+      context.lineWidth = lineWidth / scale;
       context.beginPath();
     } catch { // Cairo
-      context.setLineWidth(lineWidth / this.getScale());
-      const rgbColour = Colours.hexToScaledRGB(DesignCore.Settings.gridcolour);
+      context.setLineWidth(lineWidth / scale);
+      const rgbColour = Colours.rgbToScaledRGB(DesignCore.Settings.gridcolour);
       context.setSourceRGB(rgbColour.r, rgbColour.g, rgbColour.b);
     }
 
@@ -284,26 +465,31 @@ export class Canvas {
     context.lineTo(0, ygridmin);
     context.stroke();
 
+    // only draw the grid if within scale limits
+    if (scale < this.minScaleFactor || scale > this.maxScaleFactor) {
+      return;
+    }
+
     if (DesignCore.Settings['drawgrid']) {
       // set a feint linewidth for the grid
       lineWidth = lineWidth * 0.25;
 
       try { // HTML Canvas
-        context.lineWidth = lineWidth / this.getScale();
+        context.lineWidth = lineWidth / scale;
         context.beginPath();
       } catch { // Cairo
-        context.setLineWidth(lineWidth / this.getScale());
+        context.setLineWidth(lineWidth / scale);
       }
 
       // TODO: add setting for grid spacing
       let gridInterval = 100;
 
       // define the grid spacing based on zoom level
-      if (this.getScale() > 50) {
+      if (scale > 50) {
         gridInterval = 1;
-      } else if (this.getScale() > 5) {
+      } else if (scale > 5) {
         gridInterval = 10;
-      } else if (this.getScale() < 0.6) {
+      } else if (scale < 0.6) {
         gridInterval = 1000;
       } else {
         gridInterval = 100;
@@ -334,6 +520,11 @@ export class Canvas {
     }
   }
 
+  /**
+   * Calculate the scene offset from the canvas size
+   * i.e at 1:1 its the same as the canvas
+   * @return {number}
+   */
   getSceneOffset() {
     // Calculate the scene offset from the canvas size
     // i.e at 1:1 its the same as the canvas