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

Merge pull request #123 from Microsoft/gradient_circle

Browse Source 
Gradient circle
This commit is contained in:
Caitlin Hennessy 2017-12-20 16:34:59 -08:00 committed by GitHub
commit 300a2c1476
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 55 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
sim/visuals/controls/colorWheel.ts
View File

@ -4,30 +4,70 @@ namespace pxsim.visuals {
export class ColorWheelControl extends ControlView<ColorSensorNode> { export class ColorWheelControl extends ControlView<ColorSensorNode> {
private group: SVGGElement; private group: SVGGElement;
private colorGradient: SVGLinearGradientElement;
private defs: SVGDefsElement;
private static COLOR_DARK = 1; getInnerView(parent: SVGSVGElement) {
private static COLOR_LIGHT = 99; this.defs = <SVGDefsElement>svg.child(this.element, "defs", {});
getInnerView() {
this.group = svg.elt("g") as SVGGElement; this.group = svg.elt("g") as SVGGElement;
this.group.setAttribute("transform", `translate(12, ${this.getHeight() / 2 - 15}) scale(2.5)`) this.group.setAttribute("transform", `translate(12, ${this.getHeight() / 2 - 15}) scale(2.5)`)
let gc = "gradient-color";
this.colorGradient = svg.linearGradient(this.defs, gc, true);
svg.setGradientValue(this.colorGradient, "50%");
svg.setGradientColors(this.colorGradient, "black", "white");
const circle = pxsim.svg.child(this.group, "g"); const circle = pxsim.svg.child(this.group, "g");
const lightHalf = pxsim.svg.child(circle, "path", { 'class': 'sim-color-wheel-half', 'd': 'M19,28.76a11.71,11.71,0,1,1,4.58-.92A11.74,11.74,0,0,1,19,28.76Z', 'transform': 'translate(-6.5 -4.5)', 'style': `fill: #fff;stroke: #000;stroke-miterlimit: 10` }); const innerCircle = pxsim.svg.child(circle, "circle",
pxsim.svg.child(circle, "path", { 'd': 'M19,28.52a11.42,11.42,0,0,0,4.48-.9,11.75,11.75,0,0,0,3.67-2.47,11.55,11.55,0,0,0,2.46-3.67,11.48,11.48,0,0,0,0-9,11.41,11.41,0,0,0-6.13-6.13,11.48,11.48,0,0,0-9,0,11.41,11.41,0,0,0-6.13,6.13,11.48,11.48,0,0,0,0,9,11.55,11.55,0,0,0,2.46,3.67,11.75,11.75,0,0,0,3.67,2.47,11.42,11.42,0,0,0,4.48.9M19,29A12,12,0,1,1,31,17,12,12,0,0,1,19,29Z', 'transform': 'translate(-6.5 -4.5)', 'style': `fill: #fff;stroke: #000;stroke-miterlimit: 10` }); {cursor: '-webkit-grab',
lightHalf.addEventListener(pointerEvents.down, ev => { fill: `url(#${gc})`,
this.setColor(ColorWheelControl.COLOR_LIGHT); r: 17,
}) cx: 13,
const darkHalf = pxsim.svg.child(this.group, "path", { 'class': 'sim-color-wheel-half', 'd': 'M19,5c.16,8.54,0,14.73,0,24A12,12,0,0,1,19,5Z', 'transform': 'translate(-6.5 -4.5)' }); cy: 20,
darkHalf.addEventListener(pointerEvents.down, ev => { stroke: 'black',
this.setColor(ColorWheelControl.COLOR_DARK); 'stroke-width': 2
}) });
let pt = parent.createSVGPoint();
let captured = false;
touchEvents(circle,
ev => {
if (captured && (ev as MouseEvent).clientX) {
ev.preventDefault();
this.setColor(pt, parent, ev as MouseEvent);
}
},
ev => {
captured = true;
if ((ev as MouseEvent).clientX) {
this.setColor(pt, parent, ev as MouseEvent);
}
},
ev => {
captured = false;
},
ev => {
captured = false;
}
)
return this.group; return this.group;
} }
private setColor(color: number) { updateState() {
if (!this.visible) {
return;
}
const node = this.state;
const percentage = node.getValue();
svg.setGradientValue(this.colorGradient, percentage + "%");
}
private setColor(pt: SVGPoint, parent: SVGSVGElement, ev: MouseEvent) {
const width = CONTROL_WIDTH;
let cur = svg.cursorPoint(pt, parent, ev);
let t = Math.max(0, Math.min(1, (width + this.left / this.scaleFactor - cur.x / this.scaleFactor) / width));
const state = this.state; const state = this.state;
state.setColor(color); state.setColor((1-t)*100);
} }
} }