c_meyer
/
pxt-calliope
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

svg refactored into kindsim

This commit is contained in:
Peli de Halleux 2016-04-07 03:52:32 -07:00
parent b99231f6e2
commit 5d9c2cf590
1 changed files with 1 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
sim/simsvg.ts
View File

@ -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 = <SVGElement>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) {
(<SVGStylable><any>el).style.fill = c;
}
static fills(els: SVGElement[], c : string) {
els.forEach(el => (<SVGStylable><any>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 = <SVGLinearGradientElement>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;
(<SVGStopElement>lg.childNodes[0]).style.stopColor = start;
(<SVGStopElement>lg.childNodes[1]).style.stopColor = start;
(<SVGStopElement>lg.childNodes[2]).style.stopColor = end;
(<SVGStopElement>lg.childNodes[3]).style.stopColor = end;
}
static setGradientValue(lg : SVGLinearGradientElement, percent: string) {
(<SVGStopElement>lg.childNodes[1]).setAttribute("offset", percent);
(<SVGStopElement>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;