namespace pxsim.visuals {
const SWITCH_PART_XOFF = -1 ;
const SWITCH_PART_YOFF = -30;
const SWITCH_PART_WIDTH = 100;
const SWITCH_PART_HEIGHT = 100;
const SWITCH_PART_PIN_DIST = 15;
const SWITCH_PART_SVG_OFF = `
`;
const SWITCH_PART_SVG_ON = `
`;
// For the intructions
export function mkSideSwitchPart(xy: Coord = [0, 0]): SVGElAndSize {
const [x, y] = xy;
const l = x + SWITCH_PART_XOFF;
const t = y + SWITCH_PART_YOFF;
const w = SWITCH_PART_WIDTH;
const h = SWITCH_PART_HEIGHT;
const img = svg.elt("image");
svg.hydrate(img, {
class: "sim-led", x: l, y: t, width: w, height: h,
href: svg.toDataUri(SWITCH_PART_SVG_OFF)
});
return { el: img, x: l, y: t, w: w, h: h };
}
export class ToggleComponentVisual implements IBoardPart {
style: string;
element: SVGElement;
overElement: SVGElement;
defs: SVGElement[];
private onElement: SVGElement;
private offElement: SVGElement;
private state: ToggleState;
private currentlyOn: boolean = false;
private parsePinString: (str:string) => Pin;
constructor(parsePinString: (str: string) => Pin) {
this.element = svg.elt("g");
this.element.onclick = () => {
if (this.state) {
this.state.toggle();
runtime.queueDisplayUpdate();
}
}
this.onElement = this.initImage(SWITCH_PART_SVG_ON);
this.offElement = this.initImage(SWITCH_PART_SVG_OFF);
this.element.appendChild(this.offElement);
this.parsePinString = parsePinString;
}
moveToCoord(xy: Coord): void {
const to: Coord = [xy[0] + SWITCH_PART_XOFF, xy[1] + SWITCH_PART_YOFF];
translateEl(this.element, to);
}
init(bus: EventBus, state: ToggleStateConstructor, svgEl: SVGSVGElement, otherParams: Map): void {
this.state = state(this.parsePinString(otherParams["pin"]));
this.updateState();
}
updateState(): void {
if (this.state.on() === this.currentlyOn) {
return;
}
this.currentlyOn = this.state.on();
if (this.state.on()) {
this.element.removeChild(this.offElement);
this.element.appendChild(this.onElement)
}
else {
this.element.removeChild(this.onElement);
this.element.appendChild(this.offElement)
}
}
updateTheme(): void { }
private initImage(svgData: string) {
const image = "data:image/svg+xml," + encodeURIComponent(svgData);
let imgAndSize = mkImageSVG({
image,
width: SWITCH_PART_WIDTH,
height: SWITCH_PART_HEIGHT,
imageUnitDist: SWITCH_PART_PIN_DIST,
targetUnitDist: PIN_DIST
});
return imgAndSize.el;
}
}
}