Implemented a feature to highlight multiple regions when hovering over 1.

[sakonexus]

I was working on a project where I wanted to highlight all the areas with the same name when hovering over one of them. I was able to implement the code after running npm install, but the code here in github looks very different to what I downloaded with npm. I'm pretty new to all of this so I was hoping you can take my crappy code and fix is up for the next update. My project is using Nextjs with Typescript and it works perfectly! Thanks for all the work on this. Please let me know if there's anything else I should provide. I know it's a bit messy with all the formatting.

...
**ImageMapper.js**
var ImageMapper = function (props) {
    var containerRef = props.containerRef, 
        active = props.active, 
        disabled = props.disabled, 
        fillColorProp = props.fillColor, 
        lineWidthProp = props.lineWidth, 
        mapProp = props.map, 
        srcProp = props.src, 
        strokeColorProp = props.strokeColor, 
        natural = props.natural, 
        heightProp = props.height, 
        widthProp = props.width, 
        imageWidthProp = props.imgWidth, 
        areaKeyName = props.areaKeyName, 
        stayHighlighted = props.stayHighlighted, 
        stayMultiHighlighted = props.stayMultiHighlighted, 
        toggleHighlighted = props.toggleHighlighted, 
        parentWidth = props.parentWidth, 
        responsive = props.responsive,
        // Flag for identifying multiple regions that should be highlighted when one of them are hovered over
        multiRegion = props.multiRegion, 
...

var hoverOn = function (area, index, event, all_areas, multiRegion) {
        //Get the name of the area that was triggered and push those areas into a new array.
        var area_trigger_name = area.name;
        var same_name = [];

        for (var i = 0; i < all_areas.length; i++) {
            if (all_areas[i].name === area_trigger_name) {
                same_name.push(all_areas[i]);
            }
        }

        var shape = area.shape, 
            scaledCoords = area.scaledCoords, 
            fillColor = area.fillColor, 
            lineWidth = area.lineWidth, 
            strokeColor = area.strokeColor, 
            isAreaActive = area.active;

        if (active) {
            if(same_name.length > 1 && multiRegion === true) {
                same_name.map((area) => {
                    var shape = area.shape, 
                        scaledCoords = area.scaledCoords, 
                        fillColor = area.fillColor, 
                        lineWidth = area.lineWidth, 
                        strokeColor = area.strokeColor, 
                        isAreaActive = area.active;

                    (0, draw_1.default)
                    (
                        shape, 
                        scaledCoords, 
                        fillColor || fillColorProp, 
                        lineWidth || lineWidthProp, 
                        strokeColor || strokeColorProp, 
                        isAreaActive !== null && isAreaActive !== void 0 ? 
                        isAreaActive : true, 
                        ctx
                    );
                })
            } else {
                (0, draw_1.default)
                (
                    shape, 
                    scaledCoords, 
                    fillColor || fillColorProp, 
                    lineWidth || lineWidthProp, 
                    strokeColor || strokeColorProp, 
                    isAreaActive !== null && isAreaActive !== void 0 ? 
                    isAreaActive : true, 
                    ctx
                );
            }
        }

        if (onMouseEnter)
            onMouseEnter(area, index, event, all_areas, multiRegion);
    };

**constants.js**
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ImageMapperDefaultProps = exports.rerenderPropsList = void 0;
exports.rerenderPropsList = [
    'src',
    'active',
    'disabled',
    'width',
    'height',
    'imgWidth',
    'fillColor',
    'strokeColor',
    'lineWidth',
    'natural',
    'areaKeyName',
    'stayHighlighted',
    'stayMultiHighlighted',
    'toggleHighlighted',
    'parentWidth',
    'responsive',
    // Flag for identifying multiple regions that should be highlighted when one of them are hovered over
    'multiRegion',
];
exports.ImageMapperDefaultProps = {
    map: {
        areas: [],
        name: "image-map-".concat(Math.random()),
    },
    areaKeyName: 'id',
    containerRef: null,
    active: true,
    disabled: false,
    fillColor: 'rgba(255, 255, 255, 0.5)',
    strokeColor: 'rgba(0, 0, 0, 0.5)',
    lineWidth: 1,
    imgWidth: 0,
    width: 0,
    height: 0,
    natural: false,
    stayHighlighted: false,
    stayMultiHighlighted: false,
    toggleHighlighted: false,
    rerenderProps: [],
    responsive: false,
    multiRegion: false,
    parentWidth: 0,
    onImageClick: null,
    onImageMouseMove: null,
    onClick: null,
    onMouseDown: null,
    onMouseUp: null,
    onTouchStart: null,
    onTouchEnd: null,
    onMouseMove: null,
    onMouseEnter: null,
    onMouseLeave: null,
    onLoad: null,
};

**constants.d.ts**
...
export declare const rerenderPropsList: readonly ["src", "active", "disabled", "width", "height", "imgWidth", "fillColor", "strokeColor", "lineWidth", "natural", "areaKeyName", "stayHighlighted", "stayMultiHighlighted", "toggleHighlighted", "parentWidth", "responsive", "multiRegion"];
...

**types.d.ts**
...
export interface ImageMapperProps {
    src: string;
    map?: Map;
    areaKeyName?: 'id';
    containerRef?: {
        current: HTMLDivElement;
    } | null;
    active?: boolean;
    disabled?: boolean;
    fillColor?: string;
    strokeColor?: string;
    lineWidth?: number;
    imgWidth?: number;
    width?: number | ((e: React.MouseEvent<HTMLImageElement>) => void);
    height?: number | ((e: React.MouseEvent<HTMLImageElement>) => void);
    natural?: boolean;
    stayHighlighted?: boolean;
    stayMultiHighlighted?: boolean;
    toggleHighlighted?: boolean;
    rerenderProps?: Array<keyof ImageMapperProps>;
    responsive?: boolean;
    // Flag for identifying multiple regions that should be highlighted when one of them are hovered over
    multiRegion?: boolean;
    parentWidth?: number;
    onImageClick?: ((e: ImageEvent) => void) | null;
    onImageMouseMove?: ((e: ImageEvent) => void) | null;
    onClick?: ((area: CustomArea, index: number, e: AreaEvent) => void) | null;
    onMouseDown?: ((area: CustomArea, index: number, e: AreaEvent) => void) | null;
    onMouseUp?: ((area: CustomArea, index: number, e: AreaEvent) => void) | null;
    onTouchStart?: ((area: CustomArea, index: number, e: TouchEvent) => void) | null;
    onTouchEnd?: ((area: CustomArea, index: number, e: TouchEvent) => void) | null;
    onMouseMove?: ((area: CustomArea, index: number, e: AreaEvent) => void) | null;
    onMouseEnter?: ((area: CustomArea, index: number, e: AreaEvent, all_areas: CustomArea[] ,multiRegion: boolean) => void) | null;
    onMouseLeave?: ((area: CustomArea, index: number, e: AreaEvent) => void) | null;
    onLoad?: ((e: HTMLImageElement, dimensions: {
        width: number;
        height: number;
    }) => void) | null;
}

**Implementing the component**
<ImageMapper
src={boardUrl}
map={map}
width={width}
imgWidth={fullWidth}
multiRegion={true}
/>