commit
300a2c1476
@ -4,30 +4,70 @@ namespace pxsim.visuals {
|
||||
|
||||
export class ColorWheelControl extends ControlView<ColorSensorNode> {
|
||||
private group: SVGGElement;
|
||||
private colorGradient: SVGLinearGradientElement;
|
||||
private defs: SVGDefsElement;
|
||||
|
||||
private static COLOR_DARK = 1;
|
||||
private static COLOR_LIGHT = 99;
|
||||
|
||||
getInnerView() {
|
||||
getInnerView(parent: SVGSVGElement) {
|
||||
this.defs = <SVGDefsElement>svg.child(this.element, "defs", {});
|
||||
this.group = svg.elt("g") as SVGGElement;
|
||||
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 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` });
|
||||
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` });
|
||||
lightHalf.addEventListener(pointerEvents.down, ev => {
|
||||
this.setColor(ColorWheelControl.COLOR_LIGHT);
|
||||
})
|
||||
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)' });
|
||||
darkHalf.addEventListener(pointerEvents.down, ev => {
|
||||
this.setColor(ColorWheelControl.COLOR_DARK);
|
||||
})
|
||||
const innerCircle = pxsim.svg.child(circle, "circle",
|
||||
{cursor: '-webkit-grab',
|
||||
fill: `url(#${gc})`,
|
||||
r: 17,
|
||||
cx: 13,
|
||||
cy: 20,
|
||||
stroke: 'black',
|
||||
'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;
|
||||
}
|
||||
|
||||
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;
|
||||
state.setColor(color);
|
||||
state.setColor((1-t)*100);
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user