Skip to content

Commit bdb4564

Browse files
HUSSAR-mtrelatishko0dkamburovMarielaTihovaskrustev
authored
hotfix map sample (#663)
* added grid and hgrid remote paging samples * docs(grid): initial implementation excel style editing * docs(grid): initial excel style editing sample * docs(grid): updated sample * docs(grid): added numpads to case * docs(grid): fixed column targeting on enter nav * chore(grid): fixed type missed warning * Add default separator the clipboard operations samples. * Reorder avatar size sample to match the wc one. * Fixed console errors for Hgrid remote paging * Adding Divider Samples * Resolving key errors in browser console * Correcting the duplicate key * chore(divider-samples): format tsx files * Adding changes from build igniteui-xplat-examples-output+PRs_2024.9.13.1 * Fix missing gridRef current argument use. * docs(grid): removed old sample * docs(grid): removed perPage from constructor * Renaming the sample so it doesn't cause build error (#652) Co-authored-by: Ivan Kitanov <[email protected]> * fix(grid): updated excel style to navigate on single enter click if in edit mode * fix(grid): removed extra sample to avoid confusion * chore(*): update ig to 18.7.2-beta.0 * chore(*): update ig to 18.7.3 * Adding changes from build igniteui-xplat-examples-output+PRs_2024.10.21.1 (#656) Co-authored-by: tfsbuild <[email protected]> * add map selection (#660) * add "react-icons * fix styling in Map Selection * fix labels * fix(grid): fixed grid overlay container scrolling (#659) * update map selection --------- Co-authored-by: ttonev <[email protected]> Co-authored-by: Deyan Kamburov <[email protected]> Co-authored-by: Mariela Tihova <[email protected]> Co-authored-by: skrustev <[email protected]> Co-authored-by: Ivan Kitanov <[email protected]> Co-authored-by: ddaribo <[email protected]> Co-authored-by: tfsbuild <[email protected]> Co-authored-by: Vasya Kacheshmarova <[email protected]> Co-authored-by: Ivan Kitanov <[email protected]> Co-authored-by: Deyan Kamburov <[email protected]> Co-authored-by: IMinchev64 <[email protected]> Co-authored-by: azure-pipelines[bot] <36771401+azure-pipelines[bot]@users.noreply.github.com>
1 parent c477580 commit bdb4564

File tree

3 files changed

+45
-26
lines changed

3 files changed

+45
-26
lines changed

‎browser/src/navigation/SamplesBrowser.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -285,7 +285,8 @@ export class SamplesBrowser extends React.Component<any, any>
285285
};
286286

287287
private preventDocumentScroll(event:any) {
288-
if (event.target.outerHTML.toLowerCase().includes('igx')) {
288+
const eventPath = event.composedPath();
289+
if (event.target.outerHTML.toLowerCase().includes('igx') && eventPath.filter(x => x.classList?.value === 'igx-grid__tbody').length > 0) {
289290
event.preventDefault();
290291
}
291292
}

‎samples/maps/geo-map/shape-selection/src/MapElectionStyleUtility.ts‎

Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Style } from 'igniteui-react-core';
55
export abstract class ShapeStyling {
66
public defaultStroke = 'white';
77
public defaultFill = 'gray';
8-
public defaultThickness = 0.5;
8+
public defaultThickness = 0.75;
99
public defaultOpacity = 1.0;
1010
public defaultStyle = new Style();
1111

@@ -23,7 +23,7 @@ export abstract class ShapeStyling {
2323
let itemValue = null;
2424

2525
if (item === undefined) { // .hasOwnProperty("fieldValues")) {
26-
console.log('WARNING: Data item is missing');
26+
console.log('WARNING: Data item is missing');
2727
} else if (item.hasOwnProperty(itemMemberPath)) {
2828
itemValue = item[itemMemberPath];
2929
} else {
@@ -33,18 +33,6 @@ export abstract class ShapeStyling {
3333
}
3434
}
3535

36-
export class ShapeRange {
37-
38-
public minimum: number;
39-
public maximum: number;
40-
41-
public opacity?: number;
42-
public fill: string;
43-
public stroke?: string;
44-
public strokeThickness?: number;
45-
46-
}
47-
4836
export class ShapeComparisonStyling extends ShapeStyling {
4937

5038
public itemMemberPath = '';
@@ -53,7 +41,8 @@ export class ShapeComparisonStyling extends ShapeStyling {
5341
public generate(record: any): Style {
5442

5543
let itemValue = this.getValue(this.itemMemberPath, record);
56-
// let itemStroke = this.getValue("KeyRace", record) > 0 ? "black" : "white";
44+
let itemStroke = this.getValue("KeyRace", record) > 0 ? "black" : "white";
45+
5746
if (itemValue === null || itemValue === "") {
5847
return this.defaultStyle;
5948
}

‎samples/maps/geo-map/shape-selection/src/index.tsx‎

Lines changed: 39 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ export default class MapShapeSelection extends React.Component<any, any> {
143143
<div className="stateLabel" style={{background: stateColor}}>{stateLabel}</div>
144144
</div>);
145145
}
146-
this.sortByKey(statePickers);
146+
// this.sortByKey(statePickers);
147147

148148
let widthMenu = "16rem";
149149
let widthContent = "calc(100% - " + widthMenu + ")";
@@ -443,6 +443,10 @@ export default class MapShapeSelection extends React.Component<any, any> {
443443
this.usaSymbols.push(state);
444444
}
445445

446+
447+
this.sortByName(this.usaStates);
448+
this.sortByName(this.usaSymbols);
449+
446450
// this.usaData["VT"].X -= 1;
447451
this.usaData["NH"].Y -= 3.5;
448452
this.usaData["NH"].X -= 3;
@@ -608,7 +612,22 @@ export default class MapShapeSelection extends React.Component<any, any> {
608612
args.shapeStroke = shapeStyle.stroke;
609613
args.shapeStrokeThickness = shapeStyle.strokeThickness;
610614
}
611-
615+
616+
public static drawText(ctx: any , text: string, x: number, y: number, lineHeight: number, useMultipleLines: boolean)
617+
{
618+
if (!useMultipleLines)
619+
{
620+
ctx.fillText(text, x, y );
621+
return;
622+
}
623+
624+
let lines = text.split(' ');
625+
for (let i = 0; i < lines.length; i++) {
626+
let str = lines[i];
627+
ctx.fillText(str, x, y + (i * lineHeight));
628+
}
629+
}
630+
612631
public createMarker(): any
613632
{
614633
let smallStates = ["NH", "VT", "MA", "RI", "CT", "NJ", "DE", "MD", "DC", ];
@@ -644,11 +663,10 @@ export default class MapShapeSelection extends React.Component<any, any> {
644663
ctx.fillRect(x - (width / 2), y - (height / 2), width, height);
645664
return;
646665
}
647-
648-
let xOffset = 35;
649-
let yOffset = 10;
650-
666+
667+
let isSmallState = false;
651668
if (smallStates.indexOf(code) >= 0) {
669+
isSmallState = true;
652670
ctx.beginPath();
653671
ctx.fillStyle = item.Color;
654672
ctx.fillRect(x - (width / 2), y - (height / 2), width, height);
@@ -658,10 +676,21 @@ export default class MapShapeSelection extends React.Component<any, any> {
658676
let kr = ""; //item.KeyRace > 0 ? "* " : "";
659677
let txt = kr + code + " (" + item.Electors + ")";
660678

661-
ctx.font = '7pt Verdana';
662-
ctx.textBaseline = 'top';
663679
ctx.fillStyle = code === "HI" ? "black" : "white";
664-
ctx.fillText(txt, x - (xOffset / 2), y - (yOffset / 2));
680+
ctx.font = '7pt Verdana';
681+
682+
// ctx.lineWidth = 40;
683+
// x = x - (xOffset / 2);
684+
// ctx.textBaseline = 'top';
685+
// ctx.fillText(txt, x - (xOffset / 2), y - (yOffset / 2));
686+
687+
ctx.textBaseline = 'middle';
688+
if (isSmallState) {
689+
MapShapeSelection.drawText(ctx, txt, x, y, 12, false);
690+
} else {
691+
ctx.textAlign = 'center';
692+
MapShapeSelection.drawText(ctx, txt, x, y - 5, 12, true);
693+
}
665694
}
666695
}
667696
}
@@ -677,7 +706,7 @@ export default class MapShapeSelection extends React.Component<any, any> {
677706
const winner = this.getPartyCandidateName(item.Party);
678707
const party = this.getPartyName(item.Party);
679708
const color = this.getPartyColor(item.Party);
680-
const statusColor = item.KeyRace > 0 ? this.partyColorUKN : item.Lean === "D" ? this.partyColorDEM : this.partyColorREP;
709+
const statusColor = item.KeyRace > 0 ? "black" : item.Lean === "D" ? this.partyColorDEM : this.partyColorREP;
681710
const statusText = item.KeyRace > 0 ? "Toss-up" : item.Lean === "D" ? "Democrat" : "Republican";
682711

683712
return <div className="tooltipBox" style={{color: color}}>

0 commit comments

Comments
 (0)