From 5d9c2cf590820becbdd5a96212320aeeb986ad53 Mon Sep 17 00:00:00 2001 From: Peli de Halleux Date: Thu, 7 Apr 2016 03:52:32 -0700 Subject: [PATCH] svg refactored into kindsim --- sim/simsvg.ts | 114 +------------------------------------------------- 1 file changed, 1 insertion(+), 113 deletions(-) diff --git a/sim/simsvg.ts b/sim/simsvg.ts index e700ac82..7b308763 100644 --- a/sim/simsvg.ts +++ b/sim/simsvg.ts @@ -1,4 +1,5 @@ namespace ks.rt.micro_bit { + const Svg = ks.rt.Svg; export interface IBoardTheme { accent?: string; @@ -46,119 +47,6 @@ namespace ks.rt.micro_bit { disableTilt?:boolean; } - class Svg { - static pt : SVGPoint; - static cursorPoint(pt: SVGPoint, svg: SVGSVGElement, evt : MouseEvent) : SVGPoint { - pt.x = evt.clientX; - pt.y = evt.clientY; - return pt.matrixTransform(svg.getScreenCTM().inverse()); - } - - static rotateElement(el : SVGElement, originX : number ,originY : number,degrees:number){ - el.setAttribute( - 'transform', - `translate(${originX},${originY}) rotate(${degrees+90}) translate(${-originX},${-originY})` - ); - } - - - static elt(name:string) : SVGElement { - return document.createElementNS("http://www.w3.org/2000/svg", name) - } - - static hydrate(el : SVGElement, props: any) { - for(let k in props) { - if (k == "title") { - Svg.title(el, props[k]) - } else el.setAttributeNS(null, k, props[k]) - } - } - - static child(parent : Element, name: string, props: any) : SVGElement { - var el = Svg.elt(name); - Svg.hydrate(el, props); - parent.appendChild(el); - return el; - } - - 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) { - (el).style.fill = c; - } - - static fills(els: SVGElement[], c : string) { - els.forEach(el => (el).style.fill = c); - } - - static buttonEvents(el : Element, - move: (ev: MouseEvent) => void, - start?: (ev:MouseEvent) => void, - stop?: (ev:MouseEvent) => void) { - let captured = false; - el.addEventListener('mousedown', (ev: MouseEvent) => { - captured = true; - if (start) start(ev) - return true; - }); - el.addEventListener('mousemove', (ev:MouseEvent) => { - if (captured) { - move(ev); - ev.preventDefault(); - return false; - } - return true; - }); - el.addEventListener('mouseup', (ev:MouseEvent) => { - captured = false; - if (stop) stop(ev); - }); - el.addEventListener('mouseleave', (ev:MouseEvent) => { - captured = false; - if (stop) stop(ev); - }); - } - - static linearGradient(defs: SVGDefsElement, id : string) : SVGLinearGradientElement { - let gradient = Svg.child(defs, "linearGradient", { id: id, x1:"0%", y1:"0%", x2:"0%", y2:"100%" }); - let stop1 = Svg.child(gradient, "stop", {offset:"0%"}) - let stop2 = Svg.child(gradient, "stop", {offset:"100%"}) - let stop3 = Svg.child(gradient, "stop", {offset:"100%"}) - let stop4 = Svg.child(gradient, "stop", {offset:"100%"}) - return gradient; - } - - static setGradientColors(lg : SVGLinearGradientElement, start:string, end:string) { - if (!lg) return; - - (lg.childNodes[0]).style.stopColor = start; - (lg.childNodes[1]).style.stopColor = start; - (lg.childNodes[2]).style.stopColor = end; - (lg.childNodes[3]).style.stopColor = end; - } - - static setGradientValue(lg : SVGLinearGradientElement, percent: string) { - (lg.childNodes[1]).setAttribute("offset", percent); - (lg.childNodes[2]).setAttribute("offset", percent); - } - - static animate(el: SVGElement, cls: string) { - el.classList.add(cls); - let p = el.parentElement; - p.removeChild(el); - p.appendChild(el) - } - - static title(el : SVGElement, txt:string) { - let t = Svg.child(el, "title", {}); - t.textContent = txt; - } - } - export class MicrobitBoardSvg { public element : SVGSVGElement;