feat: pininfo-change event

fired whenever the pinInfo changes (as a result of changing another attribute, e.g. `flip` for `wokwi-led`)

Author: urish

src/7segment-element.ts

@@ -143,6 +143,13 @@ export class SevenSegmentElement extends LitElement {
     return this.pins === 'extend' ? 2 : 0;
   }
 
+  update(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('digits') || changedProperties.has('pins')) {
+      this.dispatchEvent(new CustomEvent('pininfo-change'));
+    }
+    super.update(changedProperties);
+  }
+
   renderDigit(x: number, startIndex: number) {
     const fill = (index: number) => (this.values[startIndex + index] ? this.color : this.offColor);
     return svg`

src/ks2e-m-dc5-element.ts

@@ -11,18 +11,16 @@ const x4Pos = 71.8;
 
 @customElement('wokwi-ks2e-m-dc5')
 export class KS2EMDC5Element extends LitElement {
-  get pinInfo(): ElementPin[] {
-    return [
-      { name: 'NO2', x: x1Pos, y: y1Pos, signals: [], number: 8 },
-      { name: 'NC2', x: x2Pos, y: y1Pos, signals: [], number: 6 },
-      { name: 'P2', x: x3Pos, y: y1Pos, signals: [], number: 4 },
-      { name: 'COIL2', x: x4Pos, y: y1Pos, signals: [{ type: 'power', signal: 'GND' }], number: 1 },
-      { name: 'NO1', x: x1Pos, y: y2Pos, signals: [], number: 9 },
-      { name: 'NC1', x: x2Pos, y: y2Pos, signals: [], number: 11 },
-      { name: 'P1', x: x3Pos, y: y2Pos, signals: [], number: 13 },
-      { name: 'COIL1', x: x4Pos, y: y2Pos, signals: [], number: 16 },
-    ];
-  }
+  readonly pinInfo: ElementPin[] = [
+    { name: 'NO2', x: x1Pos, y: y1Pos, signals: [], number: 8 },
+    { name: 'NC2', x: x2Pos, y: y1Pos, signals: [], number: 6 },
+    { name: 'P2', x: x3Pos, y: y1Pos, signals: [], number: 4 },
+    { name: 'COIL2', x: x4Pos, y: y1Pos, signals: [{ type: 'power', signal: 'GND' }], number: 1 },
+    { name: 'NO1', x: x1Pos, y: y2Pos, signals: [], number: 9 },
+    { name: 'NC1', x: x2Pos, y: y2Pos, signals: [], number: 11 },
+    { name: 'P1', x: x3Pos, y: y2Pos, signals: [], number: 13 },
+    { name: 'COIL1', x: x4Pos, y: y2Pos, signals: [], number: 16 },
+  ];
 
   render() {
     return html`

src/lcd1602-element.ts

@@ -109,6 +109,13 @@ export class LCD1602Element extends LitElement {
     return this.numRows;
   }
 
+  update(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('pins')) {
+      this.dispatchEvent(new CustomEvent('pininfo-change'));
+    }
+    super.update(changedProperties);
+  }
+
   path(characters: Uint8Array | number[]) {
     const xSpacing = 0.6;
     const ySpacing = 0.7;

src/led-element.ts

@@ -54,6 +54,13 @@ export class LEDElement extends LitElement {
     `;
   }
 
+  update(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('flip')) {
+      this.dispatchEvent(new CustomEvent('pininfo-change'));
+    }
+    super.update(changedProperties);
+  }
+
   render() {
     const { color, lightColor, flip } = this;
     const lightColorActual = lightColor || lightColors[color?.toLowerCase()] || color;

src/led-ring-element.ts

@@ -105,6 +105,13 @@ export class LEDRingElement extends LitElement {
     this.animationFrame = requestAnimationFrame(this.animateStep);
   };
 
+  update(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('pixels') || changedProperties.has('pixelSpacing')) {
+      this.dispatchEvent(new CustomEvent('pininfo-change'));
+    }
+    super.update(changedProperties);
+  }
+
   updated() {
     if (this.animation && !this.animationFrame) {
       this.animationFrame = requestAnimationFrame(this.animateStep);

src/membrane-keypad-element.ts

@@ -61,6 +61,13 @@ export class MembraneKeypadElement extends LitElement {
     }
   }
 
+  update(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('columns')) {
+      this.dispatchEvent(new CustomEvent('pininfo-change'));
+    }
+    super.update(changedProperties);
+  }
+
   private pressedKeys = new Set<string>();
 
   renderKey(row: number, column: number) {

src/neopixel-matrix-element.ts

@@ -168,6 +168,18 @@ export class NeopixelMatrixElement extends LitElement {
     this.animationFrame = requestAnimationFrame(this.animateStep);
   };
 
+  update(changedProperties: Map<string, unknown>) {
+    if (
+      changedProperties.has('rows') ||
+      changedProperties.has('cols') ||
+      changedProperties.has('rowSpacing') ||
+      changedProperties.has('colSpacing')
+    ) {
+      this.dispatchEvent(new CustomEvent('pininfo-change'));
+    }
+    super.update(changedProperties);
+  }
+
   updated() {
     if (this.animation && !this.animationFrame) {
       this.animationFrame = requestAnimationFrame(this.animateStep);

src/slide-potentiometer-element.ts

@@ -47,6 +47,13 @@ export class SlidePotentiometerElement extends LitElement {
     `;
   }
 
+  update(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('travelLength')) {
+      this.dispatchEvent(new CustomEvent('pininfo-change'));
+    }
+    super.update(changedProperties);
+  }
+
   render() {
     const { value, min: minValue, max: maxValue, travelLength } = this;
     // Tip is centered by default

src/stepper-motor-element.ts

@@ -124,6 +124,13 @@ export class StepperMotorElement extends LitElement {
     },
   };
 
+  update(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('size')) {
+      this.dispatchEvent(new CustomEvent('pininfo-change'));
+    }
+    super.update(changedProperties);
+  }
+
   render() {
     const spec = this.nemaSpecMap[this.size] ?? this.nemaSpecMap[defaultSize];
 

src/utils/show-pins-element.ts

@@ -30,15 +30,31 @@ export class ShowPinsElement extends LitElement {
   @property() pinColor = 'red';
   @query('#content') elementSlot!: HTMLSlotElement;
 
+  previousSlotChild?: ElementWithPinInfo;
+
   get slotChild() {
     return this.elementSlot?.assignedElements()[0] as ElementWithPinInfo | undefined;
   }
 
+  private pinInfoChangeCallback = () => {
+    this.requestUpdate();
+  };
+
+  handleSlotChange() {
+    const slotChild = this.slotChild;
+    if (slotChild !== this.previousSlotChild) {
+      this.previousSlotChild?.removeEventListener('pininfo-change', this.pinInfoChangeCallback);
+      slotChild?.addEventListener('pininfo-change', this.pinInfoChangeCallback);
+      this.previousSlotChild = slotChild;
+    }
+    this.requestUpdate();
+  }
+
   render() {
     const pinInfo = this.slotChild?.pinInfo ?? [];
     const { pinColor } = this;
     return html`<div style="position: relative">
-      <slot id="content" @slotchange=${() => this.requestUpdate()}></slot>
+      <slot id="content" @slotchange=${() => this.handleSlotChange()}></slot>
 
       <svg style="position: absolute; top: 0; left: 0" width="100%" height="100%" fill=${pinColor}>
         ${pinInfo.map(