Fixed welded links, tracer points in welded links, and added circular links for grounded joints

src/app/components/Grid/compound-link/compound-link.component.ts

@@ -12,6 +12,7 @@ import { UnitConversionService } from 'src/app/services/unit-conversion.service'
 import { NotificationService } from 'src/app/services/notification.service';
 
 import { AnimationService } from 'src/app/services/animation.service';
+import {UndoRedoService} from "../../../services/undo-redo.service";
 
 @Component({
   selector: '[app-compound-link]',
@@ -27,13 +28,14 @@ export class CompoundLinkComponent extends AbstractInteractiveComponent {
 				private svgPathService: SVGPathService,
         private unitConversionService: UnitConversionService,
         private notificationService: NotificationService,
-        public override animationService: AnimationService
+        public override animationService: AnimationService,
+              private undoRedoService: UndoRedoService
         ) {
     super(interactionService,animationService);
   }
 
   override registerInteractor(): Interactor {
-    return new CompoundLinkInteractor(this.compoundLink, this.stateService, this.notificationService);
+    return new CompoundLinkInteractor(this.compoundLink, this.stateService, this.notificationService, this.undoRedoService);
   }
 
   getColor():string{
@@ -49,7 +51,8 @@ export class CompoundLinkComponent extends AbstractInteractiveComponent {
   let allCoordsAsArray: Coord[] = Array.from(allUniqueJointCoords,(coord,index) =>{
     return this.unitConversionService.modelCoordToSVGCoord(coord);
   });
-	return this.svgPathService.getSingleLinkDrawnPath(allCoordsAsArray, radius);
+    return this.svgPathService.calculateCompoundPath(this.compoundLink.links, allCoordsAsArray, radius);
+	//return this.svgPathService.getSingleLinkDrawnPath(allCoordsAsArray, radius);
   }
   getStrokeColor(): string{
     if (this.getInteractor().isSelected) {

src/app/components/Grid/graph/graph.component.html

@@ -9,7 +9,7 @@
 
 <!-- Iterate through joints,links,compoundlinks, and forces and display them in the template. Draw links then joints-->
 <ng-container *ngFor="let trajectory of getTrajectories()">
-  <svg:g app-trajectory [trajectory]="trajectory.coords"></svg:g>
+  <svg:g app-trajectory [trajectory]="trajectory.coords" [joint]="getOneJoint(trajectory.id)" ] ></svg:g>
 </ng-container>
 
 <ng-container *ngFor="let link of getLinks()">

src/app/components/Grid/graph/graph.component.ts

@@ -113,6 +113,15 @@ export class GraphComponent {
     return Array.from(this.stateService.getMechanism().getTrajectories());
   }
 
+  public getOneJoint(id: number): Joint | null {
+    for (const joint of this.stateService.getMechanism().getJoints()) {
+      if (joint.id === id) {
+        return joint;
+      }
+    }
+    return null;
+  }
+
   public getLinks(): Link[] {
     return Array.from(this.stateService.getMechanism().getIndependentLinks());
   }

src/app/components/Grid/joint/joint.component.css

@@ -9,5 +9,5 @@
 
 .weld-icon{
   padding: 3px;
-  filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(343deg) brightness(102%) contrast(101%);
+  filter: sepia(100%) saturate(1%) hue-rotate(343deg) brightness(102%) contrast(101%);
 }

src/app/components/Grid/joint/joint.component.html

@@ -52,45 +52,54 @@
         />
     }
 
-
-    @if(isWelded()){
-      <image xlink:href='../../../assets/icons/weld.svg' class="weld-icon"
-             [attr.x]="getX()-getRadius()*2+12"
-             [attr.y]="getY()-getRadius()*2+12"
-             [attr.height]="getRadius()*2"
-      />
-
-      <!-- OLD WELD, MEANT TO BE NEW TRACER ICON- TODO PUT INTO ADD TRACER FUNCTIONALITY
-        <path
-            d='M -5.5 -5.5 H-16.5 V4.5 H-5.5 V15.5 H4.5 V4.5 H15.5 V-5.5 H4.5 V-16.5 H-5.5 V-5.5 Z'
-            [attr.fill]="getColor()"
-            stroke="#FFCA26"
-            [attr.stroke-width]="getStrokeWidth()"
-            [attr.transform]="getTranslation()"
-        ></path>
-        -->
-
-
-    }
-  @if (isRef() && !this.joint.isHidden){
+  @if (isRef() && !this.joint.isHidden && !this.joint.isTracer){
     <!-- Need more elegant way to do this WITHOUT using <image> -->
     <svg width="65" height="65" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"
          [attr.x]="getX()-23"
          [attr.y]="getY()-22">
     <!-- This centers it where the joints would regularly be, I don't know why -->
       <path d="M7.07 0V14M0 6.79H14M11.62 6.72C11.62 9.27156 9.55156 11.34 7 11.34C4.44844 11.34 2.38 9.27156 2.38 6.72C2.38 4.16844 4.44844 2.1 7 2.1C9.55156 2.1 11.62 4.16844 11.62 6.72Z" stroke="black"/>
     </svg>
+  } @else if (this.joint.isTracer && !this.joint.isGrounded) {
+    <svg:circle
+      [attr.cx]="getX()"
+      [attr.cy]="getY()"
+      [attr.r]="getRadius()"
+      [attr.fill]="getColor()"
+      stroke="#000000"
+      [attr.stroke-width]="3"
+      stroke-dasharray="9.4247 9.4247"
+    />
+  } @else {
+    <svg:circle
+      [attr.cx]="getX()"
+      [attr.cy]="getY()"
+      [attr.r]="getRadius()"
+      [attr.fill]="getColor()"
+      stroke="#FFCA26"
+      [attr.stroke-width]="getStrokeWidth()"
+    />
+  }
+
+  @if(isWelded()){
+    <image xlink:href='../../../assets/icons/weld.svg' class="weld-icon"
+           [attr.x]="getX()-getRadius()*2+14"
+           [attr.y]="getY()-getRadius()*2+18"
+           [attr.height]="getRadius()*2.1"
+    />
+
+    <!-- OLD WELD, MEANT TO BE NEW TRACER ICON- TODO PUT INTO ADD TRACER FUNCTIONALITY
+      <path
+          d='M -5.5 -5.5 H-16.5 V4.5 H-5.5 V15.5 H4.5 V4.5 H15.5 V-5.5 H4.5 V-16.5 H-5.5 V-5.5 Z'
+          [attr.fill]="getColor()"
+          stroke="#FFCA26"
+          [attr.stroke-width]="getStrokeWidth()"
+          [attr.transform]="getTranslation()"
+      ></path>
+      -->
+
+
   }
-    @else {
-        <svg:circle
-            [attr.cx]="getX()"
-            [attr.cy]="getY()"
-            [attr.r]="getRadius()"
-            [attr.fill]="getColor()"
-            stroke="#FFCA26"
-            [attr.stroke-width]="getStrokeWidth()"
-        />
-    }
 
     @if(isHovered() || isSelected() || showIDLabels) {
     <!-- Joint name -->

src/app/components/Grid/link/link.component.ts

@@ -447,7 +447,36 @@ export class LinkComponent
       coord = this.unitConversionService.modelCoordToSVGCoord(coord);
       allCoords.push(coord);
     }
-    return this.svgPathService.getSingleLinkDrawnPath(allCoords, radius);
+    if (this.link.isCircle) {
+      let pathStr = '';
+      let i: number = 0;
+      let foundInput: boolean = false;
+      let inputCoords: Coord;
+      for (const [jID, currentJ] of this.link.joints) {
+        if (!foundInput && currentJ.isGrounded) {
+          inputCoords = this.unitConversionService.modelCoordToSVGCoord(currentJ.coords);
+          pathStr = this.svgPathService.getCircularLink(inputCoords, this.farthestPoint(currentJ.coords), 18 + 10);
+          foundInput = true;
+        }
+      }
+
+      return pathStr;
+
+    } else {
+      return this.svgPathService.getSingleLinkDrawnPath(allCoords, radius);
+    }
+
+  }
+
+  farthestPoint(center: Coord): number {
+    let radius: number = 0;
+    for (const [jID, currentJ] of this.link.joints) {
+      const currentR = center.getDistanceTo(currentJ.coords);
+      if (currentR > radius) {
+        radius = currentR;
+      }
+    }
+    return radius;
   }
 
   getLengthSVG() {

src/app/components/Grid/trajectory/trajectory.component.html

@@ -1,11 +1,28 @@
 <svg:g >
   <!-- Draw the trajectory path -->
-  <path
+  @if (!this.joint?.isHidden && this.joint?.isTracer){
+    <path
+      [attr.d]="getPath()"
+      [attr.stroke]="getStrokeColor()"
+      stroke-width="2"
+      fill="none"
+      [attr.stroke-width]="3"
+      stroke-dasharray="9.4247 9.4247"
+    ></path>
+  } @else {
+    <path
+      [attr.d]="getPath()"
+      [attr.stroke]="getStrokeColor()"
+      stroke-width="2"
+      fill="none"
+    ></path>
+  }
+  <!--<path
     [attr.d]="getPath()"
     [attr.stroke]="getStrokeColor()"
     stroke-width="2"
     fill="none"
-  ></path>
+  ></path>-->
 
 </svg:g>
 

src/app/components/Grid/trajectory/trajectory.component.ts

@@ -2,6 +2,7 @@ import { Component, Input } from '@angular/core';
 import { Coord } from 'src/app/model/coord';
 import { SVGPathService } from 'src/app/services/svg-path.service';
 import { UnitConversionService } from 'src/app/services/unit-conversion.service';
+import {Joint} from "../../../model/joint";
 
 @Component({
   selector: '[app-trajectory]',
@@ -11,6 +12,7 @@ import { UnitConversionService } from 'src/app/services/unit-conversion.service'
 
 export class TrajectoryComponent {
   @Input() trajectory!: Coord[];
+  @Input() joint!: Joint | null;
 
   constructor(
     private svgPathService: SVGPathService,

src/app/components/ToolBar/undo-redo-panel/action.ts

@@ -24,6 +24,11 @@ export interface Action {
   linkTracerData?: LinkTracerSnapshot;
   linkForceData?: LinkForceSnapshot;
 
+  compoundLinkData?: CompoundLinkSnapshot;
+  compoundLinkDataArray?: CompoundLinkSnapshot[];
+  compoundExtraLinkData?: LinkSnapshot[];
+  compoundExtraJointsData?: JointSnapshot[][];
+
   oldJointPositions?: Array<{
     jointId: number;
     coords: { x: number; y: number };
@@ -49,6 +54,15 @@ export interface Action {
   newAngle?: number;
 }
 
+export interface CompoundLinkSnapshot {
+  id: number;
+  linkIds: number[];
+  name: string;
+  mass: number;
+  locked: boolean;
+  color: string;
+}
+
 export interface LinkSnapshot {
   id: number;
   jointIds: number[];
@@ -57,6 +71,7 @@ export interface LinkSnapshot {
   angle: number;
   locked: boolean;
   color: string;
+  isCircle?: boolean;
 }
 
 export interface JointSnapshot {
@@ -72,6 +87,8 @@ export interface JointSnapshot {
   locked: boolean;
   isHidden: boolean;
   isReference: boolean;
+  isTracer: boolean;
+  isPartOfWelded: boolean;
 }
 
 export interface LinkLockSnapshot {
@@ -94,6 +111,8 @@ export interface LinkTracerSnapshot {
   linkId: number;
   jointId: number;
   coords: { x: number; y: number };
+  tracerModelPos?: Coord;
+  tracerSVGPos?: Coord;
 }
 
 export interface LinkForceSnapshot {