@design-core/core 0.0.6 → 0.0.7

package/core/entities/basePolyline.js

@@ -10,10 +10,11 @@ import { Line } from './line.js';
 import { Arc } from './arc.js';
 import { Flags } from '../properties/flags.js';
 import { Property } from '../properties/property.js';
-import { AddState, RemoveState, UpdateState } from '../lib/stateManager.js';
+
 
 import { DesignCore } from '../designCore.js';
-import { SnapPoint } from '../lib/snapping.js';
+import { SnapPoint } from '../lib/auxiliary/snapPoint.js';
+import { RubberBand } from '../lib/auxiliary/rubberBand.js';
 
 /**
  * Base Polyline Entity Class
@@ -75,6 +76,14 @@ export class BasePolyline extends Entity {
 
     this.flags.setFlagValue(Property.loadValue([data?.flags, data?.[70]], 0));
 
+    // DXF Groupcode 70 bit 1 - closed flag exposed via EntityProperties
+    this.properties.add(Property.Names.CLOSED, {
+      type: Property.Type.BOOLEAN,
+      get: (entity) => entity.flags.hasFlag(1),
+      set: (entity, value) => value ? entity.flags.addValue(1) : entity.flags.removeValue(1),
+      dxfCode: 70,
+    });
+
     // If the first and last points are the same the polyline should be considered closed.
     // Require at least 4 points so that after removing the duplicate endpoint at least 3 remain.
     if (this.points.length >= 4 && this.points[0].isSame(this.points.at(-1))) {
@@ -161,54 +170,25 @@ export class BasePolyline extends Entity {
 
     if (this.points.length >= 1) {
       const points = [...this.points, mousePoint];
-      DesignCore.Scene.tempEntities.create(this.type, { points: points });
-    }
-
-    if (this.inputMode === this.modes.ARC) {
-      const arcpoints = Utils.cloneObject(this.points);
-      arcpoints.at(-1).bulge = this.getBulgeFromSegment(mousePoint);
-      const points = [...arcpoints, mousePoint];
-      DesignCore.Scene.tempEntities.create(this.type, { points: points });
+      if (this.inputMode === this.modes.ARC) {
+        // Straight segment is not the final form — show as rubber-band indicator
+        DesignCore.Scene.auxiliaryEntities.add(new RubberBand([this.points.at(-1), mousePoint]));
+        // Arc segment is the final form — draw on the current layer
+        const arcpoints = Utils.cloneObject(this.points);
+        arcpoints.at(-1).bulge = this.getBulgeFromSegment(mousePoint);
+        DesignCore.Scene.previewEntities.create(this.type, { points: [...arcpoints, mousePoint] });
+      } else {
+        DesignCore.Scene.previewEntities.create(this.type, { points: points });
+      }
     }
   }
 
   /**
    * Draw the polyline
-   * @param {Object} ctx
-   * @param {number} scale
-   * @param {boolean} stroke - don't stroke hatch boundary shapes
+   * @param {Object} renderer
    */
-  draw(ctx, scale, stroke = true) {
-    for (let i = 0; i < this.points.length; i++) {
-      if (this.points[i].bulge === 0) {
-        ctx.lineTo(this.points[i].x, this.points[i].y);
-      } else {
-        // define the next point or the first point for closed shapes
-        const nextPoint = this.points[i + 1] || this.points[0];
-        const centerPoint = this.points[i].bulgeCentrePoint(nextPoint);
-        const radius = this.points[i].bulgeRadius(nextPoint);
-
-        if (this.points[i].bulge > 0) {
-          // TODO: make this work with canvas
-          ctx.arc(centerPoint.x, centerPoint.y, radius, centerPoint.angle(this.points[i]), centerPoint.angle(nextPoint));
-        } else {
-          try { // HTML
-            ctx.arc(centerPoint.x, centerPoint.y, radius, centerPoint.angle(this.points[i]), centerPoint.angle(nextPoint), true);
-          } catch { // Cairo
-            ctx.arcNegative(centerPoint.x, centerPoint.y, radius, centerPoint.angle(this.points[i]), centerPoint.angle(nextPoint));
-          }
-        }
-      }
-    }
-
-    // handle a closed shape
-    if (this.flags.hasFlag(1)) {
-      ctx.lineTo(this.points[0].x, this.points[0].y);
-    }
-
-    if (stroke) {
-      ctx.stroke();
-    }
+  draw(renderer) {
+    renderer.drawShape(this.toPolylinePoints());
   }
 
   /**
@@ -217,12 +197,12 @@ export class BasePolyline extends Entity {
    */
   dxf(file) {
     file.writeGroupCode('0', 'LWPOLYLINE');
-    file.writeGroupCode('5', this.handle, DXFFile.Version.R2000); // Handle
+    file.writeGroupCode('5', this.getProperty(Property.Names.HANDLE), DXFFile.Version.R2000); // Handle
     file.writeGroupCode('100', 'AcDbEntity', DXFFile.Version.R2000);
     file.writeGroupCode('100', 'AcDbPolyline', DXFFile.Version.R2000);
-    file.writeGroupCode('8', this.layer); // LAYERNAME
-    file.writeGroupCode('6', this.lineType);
-    file.writeGroupCode('39', this.lineWidth);
+    file.writeGroupCode('8', this.getProperty(Property.Names.LAYER)); // LAYERNAME
+    file.writeGroupCode('6', this.getProperty(Property.Names.LINETYPE));
+    file.writeGroupCode('39', this.getProperty(Property.Names.LINEWIDTH));
     file.writeGroupCode('90', this.points.length);
     file.writeGroupCode('70', this.flags.getFlagValue());
     for (let i = 0; i < this.points.length; i++) {
@@ -253,6 +233,7 @@ export class BasePolyline extends Entity {
   /**
    * Set entity points from a polyline point representation
    * @param {Array} points
+   * @return {BasePolyline}
    */
   fromPolylinePoints(points) {
     const pts = points.map((p) => new Point(p.x, p.y, p.bulge));
@@ -260,6 +241,7 @@ export class BasePolyline extends Entity {
       pts.pop();
     }
     this.points = pts;
+    return this;
   }
 
   /**
@@ -492,240 +474,6 @@ export class BasePolyline extends Entity {
     return A.distance(point);
   }
 
-  /**
-   * Extend the entity
-   * Only extends when the end segment closest to the mouse is a line segment (bulge === 0)
-   * @param {Array} intersections - array of intersection points
-   * @return {Array} - array of state changes
-   */
-  extend(intersections) {
-    const stateChanges = [];
-
-    if (!intersections?.length) {
-      return stateChanges;
-    }
-
-    const mousePosition = DesignCore.Mouse.pointOnScene();
-    const lastIndex = this.points.length - 1;
-
-    // Determine which end segment is closer to the mouse
-    const closestOnFirst = this.closestPointOnSegment(mousePosition, 1);
-    const closestOnLast = this.closestPointOnSegment(mousePosition, lastIndex);
-    const distToFirst = mousePosition.distance(closestOnFirst);
-    const distToLast = mousePosition.distance(closestOnLast);
-
-    // Identify the selected end: the endpoint index and the bulge of its segment
-    let endPointIndex;
-    let endSegmentBulge;
-
-    if (distToFirst < distToLast) {
-      endPointIndex = 0;
-      endSegmentBulge = this.points[0].bulge;
-    } else if (distToLast < distToFirst) {
-      endPointIndex = lastIndex;
-      endSegmentBulge = this.points[lastIndex - 1].bulge;
-    } else {
-      // Tie (includes 2-point polyline where both segments are the same)
-      // Break tie by distance to the actual endpoints
-      if (mousePosition.distance(this.points[0]) <= mousePosition.distance(this.points[lastIndex])) {
-        endPointIndex = 0;
-        endSegmentBulge = this.points[0].bulge;
-      } else {
-        endPointIndex = lastIndex;
-        endSegmentBulge = this.points[lastIndex - 1].bulge;
-      }
-    }
-
-    // Only allow extending line segments (not arcs)
-    if (endSegmentBulge !== 0) {
-      DesignCore.Core.notify(`${this.type} - ${Strings.Message.NOEXTEND}`);
-      return stateChanges;
-    }
-
-    const endPoint = this.points[endPointIndex];
-    const adjacentPoint = endPointIndex === 0 ? this.points[1] : this.points[lastIndex - 1];
-
-    // Sort intersections by distance from the end point
-    Utils.sortPointsByDistance(intersections, endPoint);
-
-    // Find the closest intersection that lies beyond the endpoint
-    const direction = endPoint.subtract(adjacentPoint);
-    const newEndPoint = intersections.find((p) => {
-      if (p.isSame(endPoint)) return false;
-      if (p.subtract(endPoint).dot(direction) <= 0) return false;
-      if (adjacentPoint.distance(p) <= adjacentPoint.distance(endPoint)) return false;
-      return true;
-    });
-
-    if (!newEndPoint) {
-      return stateChanges;
-    }
-
-    // Build the new points array
-    const newPoints = this.points.map((p) => p.clone());
-    newPoints[endPointIndex] = newEndPoint;
-
-    if (newPoints[endPointIndex].isSame(this.points[endPointIndex])) {
-      return stateChanges;
-    }
-
-    stateChanges.push(new UpdateState(this, { points: newPoints }));
-    return stateChanges;
-  }
-
-  /**
-   * Trim the entity
-   * @param {Array} intersections - array of intersection points
-   * @return {Array} - array of state changes
-   */
-  trim(intersections) {
-    const stateChanges = [];
-
-    if (!intersections?.length) {
-      return stateChanges;
-    }
-
-    const mousePosition = DesignCore.Mouse.pointOnScene();
-
-    // Find the segment index closest to the mouse
-    let mouseSegmentIndex = 0;
-    let minDistance = Infinity;
-
-    for (let i = 1; i < this.points.length; i++) {
-      const closestPoint = this.closestPointOnSegment(mousePosition, i);
-      if (closestPoint) {
-        const dist = mousePosition.distance(closestPoint);
-        if (dist < minDistance) {
-          minDistance = dist;
-          mouseSegmentIndex = i;
-        }
-      }
-    }
-
-    // Filter out intersections that coincide with existing polyline vertices
-    const filteredIntersections = intersections.filter((point) => !this.points.some((vertex) => vertex.isSame(point)));
-
-    if (!filteredIntersections.length) {
-      return stateChanges;
-    }
-
-    // Locate each intersection on its segment with an ordering value
-    const locatedIntersections = [];
-
-    for (const point of filteredIntersections) {
-      for (let i = 1; i < this.points.length; i++) {
-        if (this.isPointOnSegment(point, this.points[i - 1], this.points[i])) {
-          locatedIntersections.push({
-            segmentIndex: i,
-            point: point,
-            positionAlongSegment: this.positionOnSegment(point, i),
-          });
-          break;
-        }
-      }
-    }
-
-    if (!locatedIntersections.length) {
-      return stateChanges;
-    }
-
-    // Sort by segment index, then by position along segment
-    locatedIntersections.sort((a, b) => {
-      if (a.segmentIndex !== b.segmentIndex) return a.segmentIndex - b.segmentIndex;
-      return a.positionAlongSegment - b.positionAlongSegment;
-    });
-
-    // Precompute the mouse position along its segment
-    const mouseClosest = this.closestPointOnSegment(mousePosition, mouseSegmentIndex);
-    const mousePos = mouseClosest ? this.positionOnSegment(mouseClosest, mouseSegmentIndex) : 0;
-
-    // Find the nearest intersections that bracket the mouse segment
-    // - trimBefore: the last intersection at or before the mouse
-    // - trimAfter: the first intersection at or after the mouse
-    let trimBefore = null;
-    let trimAfter = null;
-
-    for (const loc of locatedIntersections) {
-      if (loc.segmentIndex < mouseSegmentIndex) {
-        trimBefore = loc;
-      } else if (loc.segmentIndex === mouseSegmentIndex) {
-        if (loc.positionAlongSegment <= mousePos) {
-          trimBefore = loc;
-        } else if (!trimAfter) {
-          trimAfter = loc;
-        }
-      } else if (!trimAfter) {
-        trimAfter = loc;
-      }
-    }
-
-    // Build new polyline(s) from the remaining portions
-    // Portion 1: start of polyline to trimBefore point
-    if (trimBefore) {
-      const points = [];
-
-      for (let i = 0; i < trimBefore.segmentIndex - 1; i++) {
-        points.push(this.points[i].clone());
-      }
-
-      // Add the segment start point (with adjusted bulge for arcs)
-      const segStart = this.points[trimBefore.segmentIndex - 1];
-      const segStartClone = segStart.clone();
-      if (segStart.bulge !== 0) {
-        segStartClone.bulge = segStart.partialBulge(this.points[trimBefore.segmentIndex], trimBefore.point);
-      }
-      points.push(segStartClone);
-
-      // Add the trim point (skip if it coincides with the last added point)
-      const trimPoint = trimBefore.point.clone();
-      if (!points.at(-1).isSame(trimPoint)) {
-        points.push(trimPoint);
-      }
-
-      if (points.length >= 2) {
-        const polyline = Utils.cloneObject(this);
-        polyline.points = points;
-        polyline.flags.removeValue(1); // clear closed bit
-        stateChanges.push(new AddState(polyline));
-      }
-    }
-
-    // Portion 2: trimAfter point to end of polyline
-    if (trimAfter) {
-      const points = [];
-      const trimPoint = trimAfter.point.clone();
-
-      // If the segment is an arc, set remaining arc bulge
-      const segStart = this.points[trimAfter.segmentIndex - 1];
-      if (segStart.bulge !== 0) {
-        trimPoint.bulge = segStart.partialBulge(this.points[trimAfter.segmentIndex], trimPoint, true);
-      }
-
-      points.push(trimPoint);
-
-      // Add remaining points (skip if coincides with the trim point)
-      for (let i = trimAfter.segmentIndex; i < this.points.length; i++) {
-        const nextPoint = this.points[i].clone();
-        if (!points.at(-1).isSame(nextPoint)) {
-          points.push(nextPoint);
-        }
-      }
-
-      if (points.length >= 2) {
-        const polyline = Utils.cloneObject(this);
-        polyline.points = points;
-        polyline.flags.removeValue(1); // clear closed bit
-        stateChanges.push(new AddState(polyline));
-      }
-    }
-
-    if (trimBefore || trimAfter) {
-      stateChanges.push(new RemoveState(this));
-    }
-
-    return stateChanges;
-  }
-
   /**
    * Return boundingbox for entity
    * @return {BoundingBox}

package/core/entities/circle.js

@@ -5,12 +5,11 @@ import { Input, PromptOptions } from '../lib/inputManager.js';
 import { Logging } from '../lib/logging.js';
 import { DXFFile } from '../lib/dxf/dxfFile.js';
 import { BoundingBox } from '../lib/boundingBox.js';
-import { Property } from '../properties/property.js';
-import { Utils } from '../lib/utils.js';
-
 import { DesignCore } from '../designCore.js';
-import { AddState, RemoveState } from '../lib/stateManager.js';
-import { SnapPoint } from '../lib/snapping.js';
+
+import { Property } from '../properties/property.js';
+import { SnapPoint } from '../lib/auxiliary/snapPoint.js';
+import { RubberBand } from '../lib/auxiliary/rubberBand.js';
 
 /**
  * Circle Entity Class
@@ -26,19 +25,20 @@ export class Circle extends Entity {
   constructor(data) {
     super(data);
 
-    // add radius property with getter and setter
-    // needs to be enumerable to appear in the object props
-    Object.defineProperty(this, 'radius', {
-      get: this.getRadius,
-      set: this.setRadius,
-      enumerable: true,
+    // radius: computed from points — stored in EntityProperties
+    this.properties.add(Property.Names.RADIUS, {
+      type: Property.Type.NUMBER,
+      get: (entity) => entity.points[1] ? entity.points[0].distance(entity.points[1]) : 0,
+      set: (entity, rad) => {
+        entity.points[1] = entity.points[0].project(0, rad);
+      },
+      dxfCode: 40,
     });
 
-    if (data) {
-      if (data.hasOwnProperty('radius') || data.hasOwnProperty('40')) {
-        // DXF Groupcode 40 - Radius
-        this.setRadius(Property.loadValue([data.radius, data[40]], 0));
-      }
+    // Named scalar radius (internal API / named prop) — projects points[1] from center.
+    // Full-points data (post-execute or post-fromDxf) skips this.
+    if (data?.radius !== undefined && this.points.length < 2) {
+      this.setRadius(data.radius);
     }
   }
 
@@ -54,6 +54,21 @@ export class Circle extends Entity {
     return command;
   }
 
+  /**
+   * Normalise DXF group codes into the canonical points-based representation.
+   * Called by the DXF loader before construction.
+   * @param {Object} data
+   * @return {Object}
+   */
+  static fromDxf(data) {
+    const center = data.points?.[0];
+    if (!center || data[40] === undefined) return data;
+    return {
+      ...data,
+      points: [center, center.project(0, data[40])],
+    };
+  }
+
   /**
    * Execute method
    * executes the workflow, requesting input required to create an entity
@@ -113,8 +128,8 @@ export class Circle extends Entity {
   preview() {
     if (this.points.length >= 1) {
       const mousePoint = DesignCore.Mouse.pointOnScene();
-      const points = [this.points.at(-1), mousePoint];
-      DesignCore.Scene.tempEntities.create(this.type, { points: points });
+      DesignCore.Scene.auxiliaryEntities.add(new RubberBand([this.points.at(0), mousePoint]));
+      DesignCore.Scene.previewEntities.create(this.type, { points: [this.points.at(0), mousePoint] });
     }
   }
 
@@ -139,9 +154,12 @@ export class Circle extends Entity {
    * @param {Object} ctx - context
    * @param {number} scale
    */
-  draw(ctx, scale) {
-    ctx.arc(this.points[0].x, this.points[0].y, this.radius, 0, 6.283);
-    ctx.stroke();
+  /**
+   * Draw the circle
+   * @param {Object} renderer
+   */
+  draw(renderer) {
+    renderer.drawShape(this.toPolylinePoints());
   }
 
   /**
@@ -150,17 +168,17 @@ export class Circle extends Entity {
    */
   dxf(file) {
     file.writeGroupCode('0', 'CIRCLE');
-    file.writeGroupCode('5', this.handle, DXFFile.Version.R2000); // Handle
+    file.writeGroupCode('5', this.getProperty(Property.Names.HANDLE), DXFFile.Version.R2000); // Handle
     file.writeGroupCode('100', 'AcDbEntity', DXFFile.Version.R2000);
     file.writeGroupCode('100', 'AcDbCircle', DXFFile.Version.R2000);
-    file.writeGroupCode('8', this.layer);
-    file.writeGroupCode('6', this.lineType);
+    file.writeGroupCode('8', this.getProperty(Property.Names.LAYER));
+    file.writeGroupCode('6', this.getProperty(Property.Names.LINETYPE));
     this.writeDxfColour(file);
     file.writeGroupCode('10', this.points[0].x);
     file.writeGroupCode('20', this.points[0].y);
     file.writeGroupCode('30', '0.0');
-    file.writeGroupCode('39', this.lineWidth);
-    file.writeGroupCode('40', this.radius);
+    file.writeGroupCode('39', this.getProperty(Property.Names.LINEWIDTH));
+    file.writeGroupCode('40', this.getProperty(Property.Names.RADIUS));
   }
 
   /**
@@ -168,76 +186,34 @@ export class Circle extends Entity {
    * @return {Array}
    */
   toPolylinePoints() {
-    const startPoint = this.points[0].project(0, this.radius);
+    const radius = this.getProperty(Property.Names.RADIUS);
+    const startPoint = this.points[0].project(0, radius);
     startPoint.bulge = 1;
-    const endPoint = this.points[0].project(0, -this.radius);
+    const endPoint = this.points[0].project(0, -radius);
     endPoint.bulge = 1;
-    const closurePoint = this.points[0].project(0, this.radius);
+    const closurePoint = this.points[0].project(0, radius);
     return [startPoint, endPoint, closurePoint];
   }
 
   /**
-   * Set entity points from a polyline point representation
+   * Set entity points from a polyline point representation.
+   * If the points describe a full circle (start === end), mutates this Circle
+   * in place and returns it. Otherwise creates and returns an Arc, since a
+   * Circle cannot represent an open arc.
    * @param {Array} points
+   * @return {Circle|Arc}
    */
   fromPolylinePoints(points) {
-    const center = points[0].bulgeCentrePoint(points[1]);
-    const radius = center.distance(points[0]);
-    this.points = [center, center.project(0, radius)];
-  }
-
-  /**
-   * Trim the entity
-   * @param {Array} intersections
-   * @return {Array} - array of state changes
-   */
-  trim(intersections) {
-    // array to hold state changes
-    const stateChanges = [];
-
-    if (intersections?.length === 0 || !intersections) {
-      return stateChanges;
+    if (points.length >= 3 && points[0].isSame(points.at(-1))) {
+      const center = points[0].bulgeCentrePoint(points[1]);
+      const radius = center.distance(points[0]);
+      this.points = [center, center.project(0, radius)];
+      return this;
     }
-
-    const direction = 1; // Circle is always CCW for trimming purposes
-
-    // get the mouse position
-    const mousePosition = DesignCore.Mouse.pointOnScene();
-    // get the point on the arc closest to the mouse
-    const pointOnCircle = mousePosition.closestPointOnArc(this.points[1], this.points[1], this.points[0]);
-    // sort intersection points
-    Utils.sortPointsOnArc(intersections, this.points[0], this.points[0], this.points[0], direction);
-    // Repeat the first point to close the circle
-    const testPoints = [...intersections, intersections.at(0)]; // Closing the circle
-
-    // Test if mouse position is between two intersection points
-    if (testPoints.length > 1) {
-      for (let i = 0; i < testPoints.length - 1; i++) {
-        const startPoint = testPoints[i];
-        const endPoint = testPoints[i + 1];
-
-        // check if the mouse is between startPoint and endPoint
-        if (pointOnCircle.isOnArc(startPoint, endPoint, this.points[0], direction)) {
-          // create a new arc entity
-          const arc = DesignCore.CommandManager.createNew('Arc', this);
-          arc.handle = undefined;
-          // flip direction
-          arc.direction = direction * -1;
-          arc.points = [this.points[0], startPoint, endPoint];
-          const addState = new AddState(arc);
-          stateChanges.push(addState);
-
-          // Remove the existing arc
-          if (stateChanges.length > 0) {
-            const removeState = new RemoveState(this);
-            stateChanges.push(removeState);
-            return stateChanges;
-          }
-        }
-      }
-    }
-
-    return stateChanges;
+    const arc = DesignCore.CommandManager.createNew('Arc', this);
+    arc.setProperty('handle', undefined);
+    arc.fromPolylinePoints(points);
+    return arc;
   }
 
   /**
@@ -251,13 +227,14 @@ export class Circle extends Entity {
 
     const centre = this.points[0]; // circle centre point
 
+    const radius = this.getProperty(Property.Names.RADIUS);
     snaps.push(new SnapPoint(centre, SnapPoint.Type.CENTRE));
 
     snaps.push(
-        new SnapPoint(new Point(centre.x + this.radius, centre.y), SnapPoint.Type.QUADRANT), // 0°
-        new SnapPoint(new Point(centre.x, centre.y + this.radius), SnapPoint.Type.QUADRANT), // 90°
-        new SnapPoint(new Point(centre.x - this.radius, centre.y), SnapPoint.Type.QUADRANT), // 180°
-        new SnapPoint(new Point(centre.x, centre.y - this.radius), SnapPoint.Type.QUADRANT), // 270°
+        new SnapPoint(new Point(centre.x + radius, centre.y), SnapPoint.Type.QUADRANT), // 0°
+        new SnapPoint(new Point(centre.x, centre.y + radius), SnapPoint.Type.QUADRANT), // 90°
+        new SnapPoint(new Point(centre.x - radius, centre.y), SnapPoint.Type.QUADRANT), // 180°
+        new SnapPoint(new Point(centre.x, centre.y - radius), SnapPoint.Type.QUADRANT), // 270°
     );
 
     if (mousePoint) {
@@ -274,16 +251,16 @@ export class Circle extends Entity {
       const angleFromCentreToInput = centre.angle(fromPoint); // angle from centre toward fromPoint
 
       // Tangent: only possible when fromPoint is outside the circle radius
-      if (distanceToCenter > this.radius) {
-        const tangentHalfAngle = Math.acos(this.radius / distanceToCenter); // half-angle between the two tangent directions
+      if (distanceToCenter > radius) {
+        const tangentHalfAngle = Math.acos(radius / distanceToCenter); // half-angle between the two tangent directions
 
-        snaps.push(new SnapPoint(centre.project(angleFromCentreToInput + tangentHalfAngle, this.radius), SnapPoint.Type.TANGENT));
-        snaps.push(new SnapPoint(centre.project(angleFromCentreToInput - tangentHalfAngle, this.radius), SnapPoint.Type.TANGENT));
+        snaps.push(new SnapPoint(centre.project(angleFromCentreToInput + tangentHalfAngle, radius), SnapPoint.Type.TANGENT));
+        snaps.push(new SnapPoint(centre.project(angleFromCentreToInput - tangentHalfAngle, radius), SnapPoint.Type.TANGENT));
       }
 
       // Perpendicular: point on the circle that lies on the line from fromPoint through the centre
       if (distanceToCenter > 0) {
-        snaps.push(new SnapPoint(centre.project(angleFromCentreToInput, this.radius), SnapPoint.Type.PERPENDICULAR));
+        snaps.push(new SnapPoint(centre.project(angleFromCentreToInput, radius), SnapPoint.Type.PERPENDICULAR));
       }
     }
 
@@ -308,10 +285,11 @@ export class Circle extends Entity {
    * @return {BoundingBox}
    */
   boundingBox() {
-    const xmin = this.points[0].x - this.radius;
-    const xmax = this.points[0].x + this.radius;
-    const ymin = this.points[0].y - this.radius;
-    const ymax = this.points[0].y + this.radius;
+    const radius = this.getProperty(Property.Names.RADIUS);
+    const xmin = this.points[0].x - radius;
+    const xmax = this.points[0].x + radius;
+    const ymin = this.points[0].y - radius;
+    const ymax = this.points[0].y + radius;
 
     const topLeft = new Point(xmin, ymax);
     const bottomRight = new Point(xmax, ymin);