Optimize simulator for light mode. (#379)

* Optimize simulator for light mode.

* Add user-select none.
This commit is contained in:
Sam El-Husseini
2018-03-28 13:36:52 -07:00
committed by GitHub
parent b4b3a24ed2
commit 0dc2548d0b
25 changed files with 108 additions and 631 deletions

View File

@ -12,10 +12,17 @@ namespace pxsim.visuals {
private xLinkGradients: string[];
private static LIGHT_TOUCH_BLACK_COLOR = '#000';
private static LIGHT_TOUCH_RED_COLOR = '#d42715';
constructor(port: number) {
super(TOUCH_SENSOR_SVG, "touch", NodeType.TouchSensor, port);
}
protected optimizeForLightMode() {
(this.content.getElementById(this.normalizeId('touch_box_2-2')) as SVGElement).style.fill = '#a8aaa8';
}
public getPaddingRatio() {
return 1 / 4;
}
@ -29,9 +36,9 @@ namespace pxsim.visuals {
if (el) el.setAttribute(attribute, value);
}
private setStyleFill(svgId: string, fillUrl: string) {
private setStyleFill(svgId: string, fillUrl: string, lightFill: string) {
const el = (this.content.getElementById(svgId) as SVGRectElement);
if (el) el.style.fill = `url("#${fillUrl}")`;
if (el) el.style.fill = inLightMode() ? lightFill : `url("#${fillUrl}")`;
}
public attachEvents() {
@ -55,11 +62,11 @@ namespace pxsim.visuals {
private setPressed(pressed: boolean) {
if (pressed) {
for (let i = 0; i < 4; i ++) {
this.setStyleFill(`${this.normalizeId(TouchSensorView.RECT_ID[i])}`, `${this.normalizeId(TouchSensorView.TOUCH_GRADIENT_PRESSED[i])}`);
this.setStyleFill(`${this.normalizeId(TouchSensorView.RECT_ID[i])}`, `${this.normalizeId(TouchSensorView.TOUCH_GRADIENT_PRESSED[i])}`, TouchSensorView.LIGHT_TOUCH_BLACK_COLOR);
}
} else {
for (let i = 0; i < 4; i ++) {
this.setStyleFill(`${this.normalizeId(TouchSensorView.RECT_ID[i])}`, `${this.normalizeId(TouchSensorView.TOUCH_GRADIENT_UNPRESSED[i])}`);
this.setStyleFill(`${this.normalizeId(TouchSensorView.RECT_ID[i])}`, `${this.normalizeId(TouchSensorView.TOUCH_GRADIENT_UNPRESSED[i])}`, TouchSensorView.LIGHT_TOUCH_RED_COLOR);
}
}
}