From 36d0ad36b96c846e78c5c8738bfbba1fc422ef24 Mon Sep 17 00:00:00 2001 From: Peli de Halleux Date: Wed, 16 Mar 2016 22:36:34 -0700 Subject: [PATCH] various tooltips on simulator --- sim/simsvg.ts | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/sim/simsvg.ts b/sim/simsvg.ts index 56d89bba..c6bd8d43 100644 --- a/sim/simsvg.ts +++ b/sim/simsvg.ts @@ -62,7 +62,13 @@ namespace ks.rt.micro_bit { } static hydrate(el : SVGElement, props: any) { - Object.keys(props).forEach(k => el.setAttributeNS(null, k, props[k])); + Object.keys(props).forEach(k => { + if (k == "title") { + let title = Svg.child(el, "title", {}); + title.textContent = props[k]; + } + el.setAttributeNS(null, k, props[k]) + }); } static child(parent : Element, name: string, props: any) : SVGElement { @@ -72,8 +78,10 @@ namespace ks.rt.micro_bit { return el; } - static path(parent: Element, cls: string, data:string) : SVGElement { - return Svg.child(parent, "path", {class:cls, d:data}); + static path(parent: Element, cls: string, data:string, title?: string) : SVGElement { + let p : any = {class:cls, d:data}; + if (title) p["title"] = title; + return Svg.child(parent, "path", p); } static fill(el: SVGElement, c : string) { @@ -430,7 +438,7 @@ namespace ks.rt.micro_bit { var ledleft = j * ledoffw + left; var k = i * 5 + j; this.ledsOuter.push(Svg.child(this.g, "rect", { class:"sim-led-back", x:ledleft, y:ledtop, width:10, height:20, rx:2, ry:2 })); - this.leds.push(Svg.child(this.g, "rect", { class:"sim-led", x:ledleft-2, y:ledtop-2, width:14, height:24, rx:2, ry:2})); + this.leds.push(Svg.child(this.g, "rect", { class:"sim-led", x:ledleft-2, y:ledtop-2, width:14, height:24, rx:2, ry:2, title:`(${j},${i})`})); } } @@ -460,6 +468,8 @@ namespace ks.rt.micro_bit { this.pins.push(Svg.path(this.g, "sim-pin", "M359.9,317.3c-12.8,0-22.1,10.3-23.1,23.1V406H383v-65.6C383,327.7,372.7,317.3,359.9,317.3z M360,360.1c-10.7,0-19.3-8.6-19.3-19.3c0-10.7,8.6-19.3,19.3-19.3c10.7,0,19.3,8.7,19.3,19.3C379.3,351.5,370.7,360.1,360,360.1z")); this.pins.push(Svg.path(this.g, "sim-pin", "M458,317.6c-13,0-23.6,10.6-23.6,23.6c0,0,0,0.1,0,0.1h0V406H469c4.3,0,8.4-1,12.6-2.7v-60.7c0-0.4,0-0.9,0-1.3C481.6,328.1,471,317.6,458,317.6z M457.8,360.9c-10.7,0-19.3-8.6-19.3-19.3c0-10.7,8.6-19.3,19.3-19.3c10.7,0,19.3,8.7,19.3,19.3C477.1,352.2,468.4,360.9,457.8,360.9z")); + this.pins.forEach((pin, i) => Svg.hydrate(pin, {title: "P" + i})); + this.pinGradients = this.pins.map((pin,i) => { let gid= "gradient-pin-" + i let lg = Svg.linearGradient(this.defs, gid)