adds "extraColumnOffset" for generic parts

sim/definitions.ts

@@ -48,6 +48,7 @@ namespace pxsim {
         width: number,
         height: number,
         pinDist: number,
+        extraColumnOffset?: number,
         firstPin: [number, number],
     }
     export interface PartDefinition {
@@ -294,8 +295,9 @@ namespace pxsim {
                 image: "/static/hardware/speaker.svg",
                 width: 500,
                 height: 500,
-                firstPin: [110, 135],
+                firstPin: [180, 135],
                 pinDist: 70,
+                extraColumnOffset: 1,
             },
             breadboardColumnsNeeded: 5,
             breadboardStartRow: "f",

sim/instructions/instructions.ts

@@ -414,7 +414,8 @@ namespace pxsim.instructions {
             if (cmps) {
                 cmps.forEach(cmpInst => {
                     let cmp = board.addComponent(cmpInst)
-                    let rowCol: BBRowCol = [`${cmpInst.breadboardStartRow}`, `${cmpInst.breadboardStartColumn}`];
+                    let colOffset = (<any>cmpInst.visual).breadboardStartColIdx || 0;
+                    let rowCol: BBRowCol = [`${cmpInst.breadboardStartRow}`, `${colOffset + cmpInst.breadboardStartColumn}`];
                     //last step
                     if (i === step) {
                         board.highlightBreadboardPin(rowCol);

sim/visuals/boardhost.ts

@@ -149,6 +149,7 @@ namespace pxsim.visuals {
 
         public addComponent(cmpDesc: CmpInst): IBoardComponent<any> {
             let cmp: IBoardComponent<any> = null;
+            let colOffset = 0;
             if (typeof cmpDesc.visual === "string") {
                 let builtinVisual = cmpDesc.visual as string;
                 let cnstr = builtinComponentSimVisual[builtinVisual];
@@ -158,13 +159,14 @@ namespace pxsim.visuals {
             } else {
                 let vis = cmpDesc.visual as PartVisualDefinition;
                 cmp = new GenericPart(vis);
+                colOffset = vis.extraColumnOffset || 0;
             }
             this.components.push(cmp);
             this.view.appendChild(cmp.element);
             if (cmp.defs)
                 cmp.defs.forEach(d => this.defs.appendChild(d));
             this.style.textContent += cmp.style || "";
-            let rowCol = <BBRowCol>[`${cmpDesc.breadboardStartRow}`, `${cmpDesc.breadboardStartColumn}`];
+            let rowCol = <BBRowCol>[`${cmpDesc.breadboardStartRow}`, `${colOffset + cmpDesc.breadboardStartColumn}`];
             let coord = this.getBBCoord(rowCol);
             cmp.moveToCoord(coord);
             let getCmpClass = (type: string) => `sim-${type}-cmp`;