Fix rotation and distance slider update state

This commit is contained in:
Sam El-Husseini 2017-12-26 23:23:26 -08:00
parent c398a5a133
commit 85c14bb05a
2 changed files with 9 additions and 31 deletions

View File

@ -9,18 +9,16 @@ namespace pxsim.visuals {
private static SLIDER_HANDLE_HEIGHT = 31; private static SLIDER_HANDLE_HEIGHT = 31;
private isVisible = false;
getInnerView(parent: SVGSVGElement, globalDefs: SVGDefsElement) { getInnerView(parent: SVGSVGElement, globalDefs: SVGDefsElement) {
let gid = "gradient-slider-" + this.getId(); let gid = "gradient-slider-" + this.getId();
this.group = svg.elt("g") as SVGGElement; this.group = svg.elt("g") as SVGGElement;
this.gradient = createGradient(gid, this.getGradientDefinition()); this.gradient = createGradient(gid, this.getGradientDefinition());
this.gradient.setAttribute('x1', '-438.37'); this.gradient.setAttribute('x1', '0%');
this.gradient.setAttribute('y1', '419.43'); this.gradient.setAttribute('y1', '0%');
this.gradient.setAttribute('x2', '-438.37'); this.gradient.setAttribute('x2', '0%');
this.gradient.setAttribute('y2', '418.43'); this.gradient.setAttribute('y2', '100%');
this.gradient.setAttribute('gradientTransform', 'matrix(50, 0, 0, -110, 21949.45, 46137.67)'); // this.gradient.setAttribute('gradientTransform', 'matrix(50, 0, 0, -110, 21949.45, 46137.67)');
this.gradient.setAttribute('gradientUnits', 'userSpaceOnUse'); // this.gradient.setAttribute('gradientUnits', 'userSpaceOnUse');
globalDefs.appendChild(this.gradient); globalDefs.appendChild(this.gradient);
this.group = svg.elt("g") as SVGGElement; this.group = svg.elt("g") as SVGGElement;
@ -79,7 +77,7 @@ namespace pxsim.visuals {
} }
updateState() { updateState() {
if (!this.isVisible) { if (!this.visible) {
return; return;
} }
const node = this.state; const node = this.state;
@ -88,15 +86,6 @@ namespace pxsim.visuals {
this.slider.setAttribute("transform", `translate(0, ${y - DistanceSliderControl.SLIDER_HANDLE_HEIGHT / 2})`); this.slider.setAttribute("transform", `translate(0, ${y - DistanceSliderControl.SLIDER_HANDLE_HEIGHT / 2})`);
} }
onComponentVisible() {
super.onComponentVisible();
this.isVisible = true;
}
onComponentHidden() {
this.isVisible = false;
}
private updateSliderValue(pt: SVGPoint, parent: SVGSVGElement, ev: MouseEvent) { private updateSliderValue(pt: SVGPoint, parent: SVGSVGElement, ev: MouseEvent) {
let cur = svg.cursorPoint(pt, parent, ev); let cur = svg.cursorPoint(pt, parent, ev);
const height = this.getContentHeight(); //DistanceSliderControl.SLIDER_HEIGHT; const height = this.getContentHeight(); //DistanceSliderControl.SLIDER_HEIGHT;
@ -119,7 +108,7 @@ namespace pxsim.visuals {
return { return {
stops: [ stops: [
{ offset: 0, color: '#626262' }, { offset: 0, color: '#626262' },
{ offset: 1, color: "#ddd" } { offset: 100, color: "#ddd" }
] ]
}; };
} }

View File

@ -6,8 +6,6 @@ namespace pxsim.visuals {
private group: SVGGElement; private group: SVGGElement;
private slider: SVGGElement; private slider: SVGGElement;
private isVisible = false;
private static SLIDER_WIDTH = 70; private static SLIDER_WIDTH = 70;
private static SLIDER_HEIGHT = 78; private static SLIDER_HEIGHT = 78;
@ -61,7 +59,7 @@ namespace pxsim.visuals {
} }
updateState() { updateState() {
if (!this.isVisible) { if (!this.visible) {
return; return;
} }
const node = this.state; const node = this.state;
@ -71,15 +69,6 @@ namespace pxsim.visuals {
this.slider.setAttribute("transform", `translate(${x}, ${y})`); this.slider.setAttribute("transform", `translate(${x}, ${y})`);
} }
onComponentVisible() {
super.onComponentVisible();
this.isVisible = true;
}
onComponentHidden() {
this.isVisible = false;
}
private updateSliderValue(pt: SVGPoint, parent: SVGSVGElement, ev: MouseEvent) { private updateSliderValue(pt: SVGPoint, parent: SVGSVGElement, ev: MouseEvent) {
let cur = svg.cursorPoint(pt, parent, ev); let cur = svg.cursorPoint(pt, parent, ev);
const width = CONTROL_WIDTH; //DistanceSliderControl.SLIDER_HEIGHT; const width = CONTROL_WIDTH; //DistanceSliderControl.SLIDER_HEIGHT;