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

Fix color grid on IE. (#556)

Browse Source
This commit is contained in:
Sam El-Husseini 2018-05-02 16:23:53 -07:00 committed by GitHub
parent 1e3647738d
commit b323929f03
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
sim/visuals/controls/colorGrid.ts
View File

@ -8,6 +8,8 @@ namespace pxsim.visuals {
private static colorIds = ['red', 'yellow', 'blue', 'green', 'black', 'grey', 'white']; private static colorIds = ['red', 'yellow', 'blue', 'green', 'black', 'grey', 'white'];
private static colorValue = [5, 4, 2, 3, 1, 7, 6]; private static colorValue = [5, 4, 2, 3, 1, 7, 6];
private colorDivs: Element[] = [];
getInnerView() { getInnerView() {
this.group = svg.elt("g") as SVGGElement; this.group = svg.elt("g") as SVGGElement;
this.group.setAttribute("transform", `translate(2, 2.5) scale(0.6)`) this.group.setAttribute("transform", `translate(2, 2.5) scale(0.6)`)
@ -23,6 +25,7 @@ namespace pxsim.visuals {
const circle = pxsim.svg.child(this.group, "circle", { const circle = pxsim.svg.child(this.group, "circle", {
'class': `sim-color-grid-circle sim-color-grid-${colorIds[c]}`, 'class': `sim-color-grid-circle sim-color-grid-${colorIds[c]}`,
'cx': cx, 'cy': cy, 'r': '2', 'style': `fill: ${colors[c]}` }); 'cx': cx, 'cy': cy, 'r': '2', 'style': `fill: ${colors[c]}` });
this.colorDivs.push(circle);
pointerEvents.down.forEach(evid => circle.addEventListener(evid, ev => { pointerEvents.down.forEach(evid => circle.addEventListener(evid, ev => {
this.setColor(ColorGridControl.colorValue[c]); this.setColor(ColorGridControl.colorValue[c]);
})); }));
@ -30,7 +33,8 @@ namespace pxsim.visuals {
} }
const whiteCircleWrapper = pxsim.svg.child(this.group, "g", { 'id': 'white-cirlce-wrapper' }); const whiteCircleWrapper = pxsim.svg.child(this.group, "g", { 'id': 'white-cirlce-wrapper' });
pxsim.svg.child(whiteCircleWrapper, "circle", { 'class': 'sim-color-grid-circle sim-color-grid-white', 'cx': 2.2, 'cy': '16', 'r': '2', 'style': `fill: #fff` }); const circle = pxsim.svg.child(whiteCircleWrapper, "circle", { 'class': 'sim-color-grid-circle sim-color-grid-white', 'cx': 2.2, 'cy': '16', 'r': '2', 'style': `fill: #fff` });
this.colorDivs.push(circle);
pxsim.svg.child(whiteCircleWrapper, "circle", { 'cx': 2.2, 'cy': '16', 'r': '2', 'style': `fill: none;stroke: #94989b;stroke-width: 0.1px` }); pxsim.svg.child(whiteCircleWrapper, "circle", { 'cx': 2.2, 'cy': '16', 'r': '2', 'style': `fill: none;stroke: #94989b;stroke-width: 0.1px` });
pointerEvents.down.forEach(evid => whiteCircleWrapper.addEventListener(evid, ev => { pointerEvents.down.forEach(evid => whiteCircleWrapper.addEventListener(evid, ev => {
this.setColor(6); this.setColor(6);
@ -56,7 +60,7 @@ namespace pxsim.visuals {
for (let c = 0; c < ColorGridControl.colorValue.length; c++) { for (let c = 0; c < ColorGridControl.colorValue.length; c++) {
const colorId = ColorGridControl.colorIds[c]; const colorId = ColorGridControl.colorIds[c];
const colorValue = ColorGridControl.colorValue[c]; const colorValue = ColorGridControl.colorValue[c];
const colorDiv = this.group.getElementsByClassName(`sim-color-grid-${colorId}`)[0] as HTMLElement; const colorDiv = this.colorDivs[c] as HTMLElement;
if (colorValue == color) { if (colorValue == color) {
pxsim.U.addClass(colorDiv, 'sim-color-selected'); pxsim.U.addClass(colorDiv, 'sim-color-selected');