fix: align pins position to grid

Author: AriellaE

src/hx711-element.ts

@@ -7,10 +7,10 @@ export class HX711Element extends LitElement {
   @property() type: '5kg' | '50kg' | 'gauge' | undefined;
 
   readonly pinInfo: ElementPin[] = [
-    { name: 'VCC', y: 53, x: 7, number: 1, signals: [VCC()] },
-    { name: 'DT', y: 35, x: 7, number: 2, signals: [] },
-    { name: 'SCK', y: 44, x: 7, number: 3, signals: [] },
-    { name: 'GND', y: 25.5, x: 7, number: 4, signals: [GND()] },
+    { name: 'VCC', y: 55, x: 7, number: 1, signals: [VCC()] },
+    { name: 'DT', y: 36.3, x: 7, number: 2, signals: [] },
+    { name: 'SCK', y: 46.2, x: 7, number: 3, signals: [] },
+    { name: 'GND', y: 26.5, x: 7, number: 4, signals: [GND()] },
   ];
 
   get dimension() {

src/ks2e-m-dc5-element.ts

@@ -4,10 +4,10 @@ import { ElementPin } from './pin';
 
 const y1Pos = 5.1;
 const y2Pos = 32.7;
-const x1Pos = 7.6;
-const x2Pos = 25.75;
-const x3Pos = 44;
-const x4Pos = 71.8;
+const x1Pos = 5.5;
+const x2Pos = 25;
+const x3Pos = 45;
+const x4Pos = 74;
 
 @customElement('wokwi-ks2e-m-dc5')
 export class KS2EMDC5Element extends LitElement {
@@ -36,16 +36,16 @@ export class KS2EMDC5Element extends LitElement {
           <rect x="20.2" y="4.5" width=".40" height="1" fill="#dda137" />
         </g>
         <g fill="none" stroke="#dda137" stroke-width=".47">
-          <ellipse cx="2" cy="1.35" rx=".76" ry=".76" />
-          <ellipse cx="6.8244" cy="1.35" rx=".76" ry=".76" />
-          <ellipse cx="11.649" cy="1.35" rx=".76" ry=".76" />
-          <ellipse cx="19" cy="1.35" rx=".76" ry=".76" />
-          <ellipse cx="2" cy="8.65" rx=".76" ry=".76" />
-          <ellipse cx="6.8244" cy="8.65" rx=".76" ry=".76" />
-          <ellipse cx="11.649" cy="8.65" rx=".76" ry=".76" />
-          <ellipse cx="19" cy="8.65" rx=".76" ry=".76" />
+          <ellipse cx="1.6" cy="1.35" rx=".76" ry=".76" />
+          <ellipse cx="6.68" cy="1.35" rx=".76" ry=".76" />
+          <ellipse cx="11.76" cy="1.35" rx=".76" ry=".76" />
+          <ellipse cx="19.38" cy="1.35" rx=".76" ry=".76" />
+          <ellipse cx="1.6" cy="8.65" rx=".76" ry=".76" />
+          <ellipse cx="6.68" cy="8.65" rx=".76" ry=".76" />
+          <ellipse cx="11.76" cy="8.65" rx=".76" ry=".76" />
+          <ellipse cx="19.38" cy="8.65" rx=".76" ry=".76" />
         </g>
-        <text fill="#000" font-family="sans-serif" font-size="2.8222px">
+        <text fill="#4a3510" font-family="sans-serif" font-size="2.8222px">
           <tspan x="1.07" y="6.03">KS2E-M-DC5</tspan>
         </text>
       </svg>

src/rgb-led-element.ts

@@ -10,9 +10,9 @@ export class RGBLedElement extends LitElement {
 
   readonly pinInfo: ElementPin[] = [
     { name: 'R', x: 8.5, y: 44, signals: [] },
-    { name: 'COM', x: 17.5, y: 54, signals: [] },
-    { name: 'G', x: 26.4, y: 48, signals: [] },
-    { name: 'B', x: 35.7, y: 43, signals: [] },
+    { name: 'COM', x: 18, y: 54, signals: [] },
+    { name: 'G', x: 26.4, y: 44, signals: [] },
+    { name: 'B', x: 35.7, y: 44, signals: [] },
   ];
 
   render() {
@@ -30,11 +30,11 @@ export class RGBLedElement extends LitElement {
         xmlns="http://www.w3.org/2000/svg"
       >
         <!-- LED Legs -->
-        <g fill="none" stroke="#9D9999" stroke-linecap="round" stroke-width=".89px">
-          <path d="m3.3863 15.334 3.0611 13.971" />
-          <path d="m7.2753 13.972 5.9987 4.0518 1.1777 6.5679" stroke-linejoin="round" />
-          <path d="m-4.3793 14.184-5.0755 5.6592-0.10206 6.1694" stroke-linejoin="round" />
-          <path d="m-1.1952 15.607-0.33725 19.49" />
+        <g fill="none" stroke="#9D9999" stroke-linecap="round" stroke-width="1.5px">
+          <path d="m4.1 15.334 3.0611 9.971" />
+          <path d="m8 14.4 5.9987 4.0518 1.1777 6.5679" stroke-linejoin="round" />
+          <path d="m-4.3 14.184-5.0755 5.6592-0.10206 6.1694" stroke-linejoin="round" />
+          <path d="m-1.1 15.607-0.33725 18.4" />
         </g>
 
         <!-- LED Body -->