img-mapper / react-img-mapper Goto Github PK
View Code? Open in Web Editor NEWReact Component to highlight interactive zones in images
Home Page: https://img-mapper.github.io/react-docs
License: MIT License
React Component to highlight interactive zones in images
Home Page: https://img-mapper.github.io/react-docs
License: MIT License
Describe the bug
There is a Maximum Depth exceeded Error that is popping up once ImageMapper is used. This seems to related to useEffects. This is affecting my GET requests that are inside of my program causing them to infinite loop call. This error seems to pop up on a basic import of the react-img-mapper.
The error creates no visual bugs. The img mapper displays accurately but if i do any asyc function it causes unintended consequences.
To Reproduce
Steps to reproduce the behavior:
Examples
Here is a codesandbox of the error in its simplest form I could reproduce showing the error in the console.
I am unable to show the get request loop without repercussions if that is something that is needed to demonstrate.
Expected behavior
The Img mapper will not setState infinitely affect other parts of program when implemented
Desktop (please complete the following information):
Additional notes
-Let me know if the codesandbox works
-It might be based on the latest release but I havent tested the 1.4.3 version if it has this issue so I will be testing this next
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Every map should have map with cords
Desktop (please complete the following information):
Describe the bug
When declaring the map coordinates, if you put active = false, it deactivates the preFillColor option.
To Reproduce
Steps to reproduce the behavior:
const map = { active = false, preFillColor = "rgba(69, 82, 94, 0.70)", id = 1, name = "1", shape = "poly", coords = [...] }
Expected behavior
A clear and concise description of what you expected to happen.
The active = false should not disable the preFillColor.
Desktop (please complete the following information):
Describe the bug
Just started to work with the lib and copy/pasted the example implementation but it doesn't render anything.
To Reproduce
This is my implementation (basic example):
import React from "react";
import ImageMapper from "reactjs-img-mapper";
import { Deck } from "../../../types/typeclass";
function PannelsMarker({ deck }: { deck: Deck }) {
const URL =
"https://raw.githubusercontent.com/img-mapper/react-docs/master/src/assets/example.jpg";
const MAP = {
name: "my-map",
// GET JSON FROM BELOW URL AS AN EXAMPLE
areas: [...the JSON file content],
};
if (!deck.layout_file) return <div>No file</div>;
console.log("Should render map");
return (
<div className="p-2 bg-yellow-300">
<ImageMapper src={URL} map={MAP} />
</div>
);
}
export default PannelsMarker;
Error Stack
Ony error is the following
Warning: ImageMapper: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
Expected behavior
An image map should render
Screenshots
https://imgtr.ee/image/WqlTX
Desktop (please complete the following information):
Additional context
I'm building my sie with Nxt.js 13.
Describe the bug
This is an intermittent bug. Sometimes when the page loads, highlight on hover does not highlight in the right area (please see image provided). It happens when I use the attribute of responsive={true}
in my <ImageMapper />
tag.
To Reproduce
Steps to reproduce the behavior:
This is how I wrote my ImageMapper for responsiveness
//this is before the render function
const [imageMapperWidth, setImageMapperWidth] = useState(0);
const imageMapperRef = useRef();
useEffect(() => {
setImageMapperWidth(imageMapperRef.current.offsetWidth);
}, []);
let movement_timer = null;
window.addEventListener('resize', () => {
clearTimeout(movement_timer);
movement_timer = setTimeout(() => {
if (imageMapperRef.current?.offsetWidth) {
setImageMapperWidth(imageMapperRef.current.offsetWidth);
}
}, 1000);
});
//this is in my render
<ImageMapper
src={url}
map={
...
}
responsive={true}
parentWidth={imageMapperWidth}
fillColor={'rgba(71, 131, 230, 0.70)'}
strokeColor={'rgba(71, 131, 230)'}
onClick={(area) => {
handleClickLot(area);
}}
onMouseEnter={(area) => {
enterArea(area);
handleMouseMove(area);
}}
onMouseLeave={(event) => {
handleMouseLeave(event);
}}
/>
Expected behavior
When the component loads, all the highlights should be in the proper designated area. This also applies when resizing the screen.
Screenshots
Video of issue:
https://share.vidyard.com/watch/PFVv2Td5TRLN7YPLGDPkhQ?
Desktop (please complete the following information):
Is there any example, react-img-mapper with zoom and pan library?
I want my canvas to be zoomed and panned (react zoom pan pinch library) properly, is there any example available? Thre
Thanks
Describe the bug
It doesnt happend on Firefox.
The problem is when you move the mouse cursor over the image map, sometimes it stills freeze, stuck.
Checking the code, it makes a math division,
return coords.map(function (coord) { return coord / (imgRef.naturalWidth / parentWidth); });
and debugging it, sometimes 'imgRef.naturalWidth ' is zero (0)
Error Stack
npm package version v1.3.0
You could see "infinity" coords on each element of map:
<area shape="poly" coords="Infinity,Infinity,Infinity,Infinity,Infinity,Infinity,Infinity,Infinity,Infinity,Infinity,Infinity,Infinity,Infinity,Infinity,Infinity,Infinity,Infinity,Infinity,Infinity,Infinity,Infinity,Infinity,Infinity,Infinity,Infinity,Infinity,Infinity,Infinity,Infinity,Infinity" href="#" alt="map">
Expected behavior
Don't do that :)
Desktop (please complete the following information):
Describe the bug
I am getting continuous key uniqueness error from your module
To Reproduce
Error Stack
Encountered two children with the same key,
03
. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
Expected behavior
Not getting error
Screenshots
Desktop (please complete the following information):
JSON
[
{
"id": "<AutoIncrementValue>",
"title": "title",
"shape": "poly",
"name": "name",
"fillColor": "skyblue",
"strokeColor": "black",
"coords": [<MyCoords>]
},
....
]
Describe the bug
There's an error on the map parameter of the ImageMapper component: "Type '{ name: string; areas: string; }' is not assignable to type 'Map'. Types of property 'areas' are incompatible. Type 'string' is not assignable to type 'MapAreas[]'."
To Reproduce
Use <ImageMapper src{URL} map={MAP} /> with the example JSON from the npm page: https://raw.githubusercontent.com/img-mapper/react-docs/master/src/assets/example.json
Error Stack
Type '{ name: string; areas: string; }' is not assignable to type 'Map'. Types of property 'areas' are incompatible. Type 'string' is not assignable to type 'MapAreas[]'.
Expected behavior
Map should work
Desktop (please complete the following information):
Is your feature request related to a problem? Please describe.
I want an area to be always highlighted like the preFillColor works, but I want only the stroke to be drawn. The stroke should be white and if the mouse enter the area the stroke should turn green.
Describe the solution you'd like
I want a new prop preStrokeColor
that allows to set different stroke color in highlighted and default state.
Describe alternatives you've considered
I tried using the the preFillColor with alpha 0, but that way the stroke color is always the same if the mouse moves over the are or not. I need the stroke to be always white and if the mouse enters the are the stroke should turn green.
I also tried to use the callbacks onMouseEnter
and onMouseLeave
to change the map areas stroke color. But the rerendering gave me flashings and unexpected results.
Stackoverflow posted: https://stackoverflow.com/questions/71656564/i-want-to-highlight-image-area-when-i-search-it-thru-input-field
The current behavior is when I search the area by name, it wont highlight the area by id, and when I click any area with coordinates, all of them stays highlighted without referencing the areaSearchResultByID state.
So far I have these functions and states.
const [stayHighlight, setStayHighlight] = useState(false) //to stay highlight when search is finish.
const [areaSearchResultByID, setAreaSearchResultByID] = useState(0) //set area id state when search is finish.
Handle onKeyDown where I filter the json of searching and set the state of AREA ID
const handleOnSubmitSearchArea = () => {
cubicleJSON
.filter((x) => {
if (searchTerm === x.cubicle_number) {
console.log(x.department)
} else if (searchTerm === x.department) {
if (x.department === 'SPOC') {
setAreaSearchResultByID(1)
} else if (x.department === 'GRID') {
setAreaSearchResultByID(2)
} else {
setAreaSearchResultByID(0)
}
}
})
.map((x, index) => {
return <></>
})
setStayHighlight(true)
}
and I have this ImageMapper
<ImageMapper
src={IMG}
map={MAP}
natural
width={1400}
areaKeyName={areaSearchResultByID}
stayHighlighted={stayHighlight}
onImageClick={() => setStayHighlight(false)}
onMouseEnter={(areas) => setHoverArea(areas.name)}
onMouseLeave={(areas) => setHoverArea('7th Floor Plan')}
/>
Describe the bug
null is not an object (evaluating 'imgRef.naturalWidth')
To Reproduce
<ImageMapper
responsive
parentWidth={100}
areaKeyName="unique-key"
onClick={() => {}}
src={IMAGE}
map={MAP}
/>
Expected behavior
I specify reponsive prop & parentWidth and the component auto-sizes
Desktop (please complete the following information):
Additional context
Im pretty sure is something wrong with my setup. Everything else works flawlessly. Great job!
Describe the bug
Error on parameter map on the ImageMapper component.
To Reproduce
Use the component <ImageMapper src{URL} map={MAP}
Error Stack
Type '{ name: string; areas: { id: string; title: string; shape: string; name: string; fillColor: string; strokeColor: string; coords: number[]; polygon: number[][]; }[]; }' is not assignable to type 'Map'.
Expected behavior
Draw the map.
Desktop (please complete the following information):
Additional context
I'm using this on my app build with React and Ionic 5.
Can you look at adding dashed lines? maybe with control of spaces and line length. It seems like a simple inclusion to add.
I need a way to differentiate visually between shapes for accessibility and a dashed stroke would help and not too hard to add.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash
Is it possible to add this functionality?
Hi,
I’m using react-image-mapper in a project with React 18 and noticed that the npm versions only support up to React 14. I had to install from GitHub to get the 2.0 version compatible with React 18.
Could you update the npm package to include the latest version? This would help ensure compatibility and ease dependency management.
Thanks for the great library and looking forward to the update!
Best
Describe the bug
When the component is initialised, it is not always displayed correctly. The image, the canvas, the map component and the areas are always there, but sometimes neither the div#img-mapper container nor the canvas has any height, so the areas are not displayed, it is as if they were not there. You have to refresh the page to make it work correctly.
Expected behavior
The component should initialise correctly from the beginning, without the need to refresh the page.
Additional context
As you can see in the image, the component is placed inside a container with a grey background, as the content has no height, the coloured container has no height either. Although the image is visible.
Map is getting flagged for accessibility issues – namely around labelling for the map and individual area elements.
https://www.w3.org/WAI/tutorials/images/imagemap/
For image maps, text alternatives are needed on both the element itself (to convey the informative context) and on each of the elements (to convey the link destination or the action that will be initiated if the link is followed).
Currently, the img element and all area elements are hardcoded with the alt text "map". I'd like to be able to pass in more descriptive alt text for each.
Is it possible to add this functionality?
Describe the bug
Having same id in the MapAreas[] list throws an exception with Encountered two children with the same key
.
To Reproduce
Steps to reproduce the behavior:
{
id: x.baseId,
shape: 'rect',
coords: [0, 185, 237, 240],
preFillColor: 'rgb(255,255,255,0)',
}
<ImageMapper
src={area.imgSrc}
onClick={event => openModalForStructureDetail(event)}
map={{name: area.id, areas: area.componentMap as MapAreas[]}}
onLoad={e => handleLoadedImage(e)}
/>
Warning: Encountered two children with the same key, `13`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
at map
at div
at ImageMapper (http://localhost:5173/node_modules/.vite/deps/react-img-mapper.js?v=2ed9ea2e:398:32)
at div
at http://localhost:5173/node_modules/.vite/deps/chunk-2NS6L6TO.js?v=2ed9ea2e:4971:18
at http://localhost:5173/node_modules/.vite/deps/chunk-2NS6L6TO.js?v=2ed9ea2e:16193:14
at http://localhost:5173/node_modules/.vite/deps/chunk-2NS6L6TO.js?v=2ed9ea2e:16331:14
at div
at http://localhost:5173/node_modules/.vite/deps/chunk-2NS6L6TO.js?v=2ed9ea2e:4971:18
at http://localhost:5173/node_modules/.vite/deps/chunk-2NS6L6TO.js?v=2ed9ea2e:20772:14
at div
Expected behavior
Adding areaKeyName="index"
solves the issue, however declaration in the types.d.ts
defines that areaKeyName
only accepts id areaKeyName?: 'id';
. I need to add ignore //@ts-ignore
for it to work.
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
Additional context
I can't apply the fix stated in this issue because I cannot edit areaKeyName
without getting compiler errors.
Is your feature request related to a problem? Please describe.
Yes. In the new version, the users are now able to disable highlighting in certain area of the map. However, they can still click on it which allow them to access the data.
Describe the solution you'd like
I would like to be able to completely disable that area when active is false.
Describe alternatives you've considered
Alternative would be updating name attribute to empty so that they cannot access the data from it.
Describe the bug
React defaultProps is scheduled to be deprecated in the next major release, 18.3: see here
To Reproduce
Steps to reproduce the behavior:
Mounting ImageMapper with React 18.2 generates this warning.
Error Stack
Warning: ImageMapper: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead. at ImageMapper (webpack-internal:///(app-client)/./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/react-img-mapper/dist/ImageMapper.js:60:30)
Expected behavior
Change the default props syntax to the ES6 standard to remove this warning and prevent future bugs. See an example in this thread.
Screenshots
N/A
I cannot Resize ImageMapper like I usually do with normal img
I have a high resolution image that needs resizing in my div.
I tried resizing parent div, tried adding width prop, tried adding imgWidth prop but still no changes.
Is your feature request related to a problem? Please describe.
It is not a problem related feature. But it would be great to have a feature that allows you to add customized labelling to each areas.
Describe the solution you'd like
I was thinking something like the preFillColor, but instead it is called something like "label" which would show a customized text on that coordinated area. So in
const map = [id: "1", name: "1", coords: [...], label: "example"]
I will work on a part of computer image and using toggle feature. When user click on a part, open a modal and user choose a option for that part. Its working as well but components on image too close each others. I want to user can confirm selection. If user miss click on object, user can say oh its miss click take toggle back.
is toggle update possible?
Is your feature request related to a problem? Please describe.
It is not a big problem but I think a bool disabled function would be great as sometimes on site-plans, I want to disable certain sold-out area.
Describe the solution you'd like
Probably something like disable boolean that we can add when we declare the map const.
Describe alternatives you've considered
Currently I am updating the id to empty so that users cannot click on that certain area. But this is not the best solution because users can technically still click on it. It is just that it is not linked to that id because I removed it. A disable boolean would be a better way to do it.
Having these events will improve the expandability of this module and allow more people to use this for more use cases.
Hi, I become all the time this warning, it looks like you use defaultProps. Could you please fix this for production? Thanks!
Warning: ImageMapper: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
at ImageMapper (webpack-internal:///(ssr)/./node_modules/react-img-mapper/dist/ImageMapper.js:73:30)
at FloorPlan (webpack-internal:///(ssr)/./src/app/loungetool/Floorplan.tsx:23:96)
at div
at eval (webpack-internal:///(ssr)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js:61:74)
at Container (webpack-internal:///(ssr)/./node_modules/@mui/system/esm/Container/createContainer.js:114:23)
at LoungeReservations (webpack-internal:///(ssr)/./src/app/loungetool/page.tsx:37:86)
at StaticGenerationSearchParamsBailoutProvider (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/static-generation-searchparams-bailout-provider.js:15:11)
at Lazy
at InnerLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:239:11)
at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:71:9)
at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:79:11)
at NotFoundBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
at LoadingBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:313:11)
at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:128:11)
at InnerScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:151:9)
at ScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:226:11)
at RenderFromTemplateContext (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44)
at Lazy
at OuterLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:322:11)
at Lazy
at InnerLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:239:11)
at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:71:9)
at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:79:11)
at NotFoundErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9)
at NotFoundBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
at LoadingBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:313:11)
at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:128:11)
at InnerScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:151:9)
at ScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:226:11)
at RenderFromTemplateContext (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44)
at Lazy
at OuterLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:322:11)
at Lazy
at body
at ThemeProvider (webpack-internal:///(ssr)/./node_modules/@mui/private-theming/ThemeProvider/ThemeProvider.js:45:13)
at ThemeProvider (webpack-internal:///(ssr)/./node_modules/@mui/system/esm/ThemeProvider/ThemeProvider.js:58:13)
at ThemeProvider (webpack-internal:///(ssr)/./node_modules/@mui/material/styles/ThemeProvider.js:26:18)
at LocalizationProvider (webpack-internal:///(ssr)/./node_modules/@mui/x-date-pickers/LocalizationProvider/LocalizationProvider.js:41:25)
at html
at RootLayout (webpack-internal:///(ssr)/./src/app/layout.tsx:21:23)
at Lazy
at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:71:9)
at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:79:11)
at ReactDevOverlay (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9)
at HotReload (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:296:11)
at Router (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/app-router.js:155:11)
at ErrorBoundaryHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:99:9)
at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:128:11)
at AppRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/app-router.js:421:13)
at Lazy
at Lazy
at /Users/noahpique/Documents/GitHub/nightpilotapp/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:381577
at /Users/noahpique/Documents/GitHub/nightpilotapp/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:381577
at ServerInsertedHTMLProvider (/Users/noahpique/Documents/GitHub/nightpilotapp/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:17605)
Describe the bug
I use a React project without Tailwind the image and hover work well
but I installed "tailwindcss": "3.3.3", after that the image does not show up, the canva and map does not work as expected nothing happens
only when I comment this line it works again
/* @tailwind base; */
Is your feature request related to a problem? Please describe.
I am trying to display an array of Area ID's on a map.
Is it possible? I read the documentation and I have no clue on how to do it.
Thank you!
Describe the bug A clear and concise description of what the bug is.
I want to use a function if I am clicking on an area.
The first time the function will be used. After clicking on the other area, nothing happend.
At the screenshot you can see: Postit, keyboard and desktop is marked.
in the console only one time shows the log message "Logging a message!'", It should be everytime if I am click on the different area. Do you have a solution?
To Reproduce Steps to reproduce the behavior:
Desktop (please complete the following information):
Additional context Add any other context about the problem here.
I use for usually typescript.
const logMessage = () => {
console.log('Logging a message!');
};
<ImageMapper src={URL} map={MAP} stayMultiHighlighted={true} onClick={logMessage}/>
Hello,
Thanks for the library.
I want to know if it's possible to have pointer cursor over highlighted area? I'd like to have as CSS, like this:
<ImageMapper
src={url}
map={map}
width={180}
height={561}
style={{ cursor: 'pointer' }}
/>
Is your feature request related to a problem? Please describe.
When the image map is pinched in on mobile, the borders/highlighted regions are pixelated/blurry.
Describe the solution you'd like
Borders/Highlighted regions should be smooth when zoomed in.
Describe alternatives you've considered
Considering the alternative of going without borders;
Additional context
On Chrome/Devtools, enable the mobile viewport/debugger, inspect the image map, and replace the image used with an SVG.
Use Shift-Click on the mobile viewport in devtools tools to drag and simulate pinch to zoom as it would occur on a mobile device.
Notice that while the SVG remains sharp, the border drawn by react-img-mapper
is blurry and pixelated.
Is your feature request related to a problem? Please describe.
Is it possible to make a map with two polygons to behave as one area
Describe the solution you'd like
The ability to provide an area with array of polygon or connect two or more areas together when they have the same title.
Hi, I have a questions about coords. In the examples, the areas field is always a json. I'm wondering how to add coords dynamically with this tool. I need to draw a polygon, get coords and draw it on image, is it possible with this tool?
Thank you!
I'm trying to implement this package. I don't want to go to a url when I click on the area but I want a modal to open.
I tried this by implementing the standard image map with html etc and this works fine. Since i want the image map to be responsive I wanted to use this pacakage. The responsive feature works great but the onClick doesn't work. Even if I add a simple console log to the onClick nothing happens.
To reproduce, add a onClick property on the ImageMapper component. Click on the area, nothing happens.
Also I can't find a demo which uses the onClick.
Describe the bug
When the onClick property is called on the mapper, nothing happens.
To Reproduce
Steps to reproduce the behavior:
clearButtonTemplate
like so: const clicked = (area,i,e) => {
console.log(area,i,e);
}
return (
<Fragment>
<ImageMapper
containerRef={myRef}
src={URL}
map={MAP}
stayMultiHighlighted
onClick={(area,i,e)=>this.clicked(area,i,e)}
/>
<button onClick={handleClear}>Clear</button>
</Fragment>
)
}
Error Stack
None
Expected behavior
console should log area
, i
, and e
How to dynamically change the data without rerendering ?
like how we can change the preFillColor of specific item without rerendering it ?
Sometimes canvas height is 0. There is a bug, I have seen that sometimes react-img-mapper
fails to set right canvas height. I am using react-image-mapper
as of now and it works fine, it always sets the height of the canvas right
I have created a code sandbox here is the link. If you open the the rendering image in new tab. It fails to load the canvas height
Desktop (please complete the following information):
Windows
Chrome
Describe the bug
I set up a Different Height and Width the image size is working but the canvas or map is not adapting to the new values the hover breaks is not responsive
https://codesandbox.io/p/sandbox/zen-waterfall-dygwpg?file=%2Fapp%2Fpage.tsx%3A617%2C63
Is your feature request related to a problem? Please describe.
Hello! I'm creating a game to find the differences between two images with this library.
The problem is that when I hover the mouse over an area, the hover style spoils the answer.
Describe the solution you'd like
I would like to know if there's any way to hide or delete the hover styles of the map areas and also keep the styles of the shapes after clicking on them.
Describe alternatives you've considered
I've tried using the .img-mapper-map class and targeting the area but it didn't work.
My guess was that doing something like this would disable the styles, but the only property that worked was the pointer one:
.img-mapper-map {
area:hover {
cursor: pointer;
fill: rgba(255, 255, 255, 0.0);
border-color: rgba(255, 255, 255, 0.0);
border: none;
border-style: none;
background: rgba(255, 255, 255, 0.0);
background-color: rgba(255, 255, 255, 0.0);
}
}
Describe the bug
This is about the new disable feature for each individual area. When I change one area dynamically with Firebase, the other areas become unclickable.
To Reproduce
Steps to reproduce the behavior:
I currently have a button <button onClick={handleClick}> Click me </button>
then in my handleClick I would have
firebase
.database()
.ref('...')
.orderByChild('available')
.equalTo('soldout')
.on('value', (snapshot) => {
snapshot.forEach((lot) => {
var child = firebase
.database()
.ref('/...')
.child(lot.key)
.child('mapCoords');
child.update({
preFillColor: 'rgba(255, 20, 20, 0.47)',
active: false,
disabled: true
https://user-images.githubusercontent.com/34180725/112985147-d2230b80-912d-11eb-8a75-c6824e1b12c6.mp4
, <----------
});
});
});
This is supposed to disable that area clicked and leave preFillColor if I click on other area
Expected behavior
Disable area set to true while leaving the preFillColor.
Desktop (please complete the following information):
Please find attached video:
Describe the bug
I have created a react webpart utilising the react-img-mapper,
I collect the MAP data from some PropertyFieldCollectionData fields then build the MAP const based the fields values
During gulp serve testing, this works perfectly, however when I deploy to a site collection and configure the webpart part, on the first visit to the page the image displays but the MAP areas do not work.
After a refresh (F5) of the browser the MAP areas work, however if I do a hard refresh of the browser (CTRL+ F5) or close the browser and go back to the page the MAP areas are inactive again.
I know the MAP const has been created due to the console.log displayed in the render area.
This is the code I am using in the .tsx file
Webpart .tsx code
`
export interface IReactImageMapState {
mapArray: string;
}
export default class ReactImageMap extends React.Component<IReactImageMapProps, IReactImageMapState > {
constructor(props) {
super(props);
this.state = {
mapArray: "",
};
this.getMapInfo();
}
private getMapInfo(): void {
if (this.props.collectionData) {
let mapInfoData = this.props.collectionData.map((mapinfo, i) => {
if (mapinfo.href == null || mapinfo.href == "") {
return `{"shape":"${mapinfo.Shape}","coords":[${mapinfo.Coords}],"fillColor":"${mapinfo.fillColor}${mapinfo.fillTransparency}","strokeColor":"rgba(0,0,0,0)"}`;
} else {
return `{"shape":"${mapinfo.Shape}","coords":[${mapinfo.Coords}],"fillColor":"${mapinfo.fillColor}${mapinfo.fillTransparency}","href":"${mapinfo.href}","strokeColor":"rgba(0,0,0,0)"}`;
}
});
this.setState({
mapArray: JSON.parse(`{"name":"my-map","areas":[` + String(mapInfoData) + `]}`)
});
}
}
public componentDidUpdate(prevProps, prevState): void {
if (prevProps.collectionData !== this.props.collectionData) {
this.getMapInfo();
}
}
public componentDidMount(): void {
this.getMapInfo();
}
public render(): React.ReactElement<IReactImageMapProps> {
const URL = encodeURI(this.props.imageUrl);
const MAP = this.state.mapArray;
console.log("URL: " + URL);
console.log("MAP: " + MAP);
if (URL == "undefined") {
return (
<div className={styles.reactImageMap} >
<div className={styles.container} >
<div className={styles.row}>
<div className={styles.column}>
<span className={styles.title}>React Image Map Webpart</span>
<p>Open the property pane to configure this webpart</p>
</div>
</div>
</div>
</div>
);
} else {
if (URL && MAP) {
return (
<div className={styles.reactImageMap} >
<div className={styles.container} >
<span>URL & MAP</span>
<div>
<ImageMapper
src={URL}
map={MAP}
responsive={true}
parentWidth={this.props.webPartWidth}
/>
</div>
</div>
</div>
);
} else {
return (
<div className={styles.reactImageMap} >
<div className={styles.container} >
<span>URL</span>
<div>
<ImageMapper
src={URL}
responsive={true}
parentWidth={this.props.webPartWidth}
/>
</div>
</div>
</div>
);
}
}
}
}
`
Expected behavior
Expected behaviour is that on the first visit to the page the MAP areas work
Desktop (please complete the following information):
Additional context
Add any other context about the problem here.
Describe the bug
When updating the highlight colors dynamatically onClick of a button, all the areas turn to the color of the highlight. I have to hover over it for the color to update.
To Reproduce
I have populated my firebase realtime database with the data of map coordinates with the other attributes like so.
const [mapCoords, setMapCoords] = useState({
'name': 'my-map',
});
Then used useEffect to populate it
useEffect(() => {
async function getData() {
await firebase
.database()
.ref('...')
.once('value', (snapshot) => {
var mapCoordObj;
var areaArr = [];
snapshot.forEach((lot) => {
var mapCoordVal = lot.val().mapCoords;
areaArr.push(mapCoordVal);
var mapCoordChild = lot.child('mapCoords');
console.log('mapCoordChild: ' + JSON.stringify(mapCoordChild));
mapCoordChild.forEach((child) => {
console.log('childdddd: ' + JSON.stringify(child));
});
console.log('mapCoordVal ' + JSON.stringify(mapCoordVal));
mapCoordObj = {
...mapCoords,
areas: areaArr,
};
});
console.log('areaa: ' + areaArr);
setMapCoords(mapCoordObj);
});
}
getData();
}, []);
Then I have a button
<button onClick={handleChangeColor}>Change Color</button>
const handleChangeColor = () => {
firebase
.database()
.ref('...')
.orderByChild('available')
.equalTo('pending')
.on('value', (snapshot) => {
snapshot.forEach((lot) => {
var child = firebase
.database()
.ref('...')
.child(lot.key)
.child('mapCoords');
child.update({
preFillColor: 'rgba(255, 255, 168, 0.70)',
name: id,
active: true,
});
});
});
}
This would handle the color change. However, when I click on the button, it will turn all areas to the color of the highlight like so:
To change the color, I would have to hover over any of those areas and it will change it.
Desktop (please complete the following information):
Describe the bug
In the demo, in cases when a mouse click should cause unhighlighting of a previously highlighted area, the unhighlighting does not render immediately. Rather, it appears to be delayed until the mouse exits the area it is currently over.
To Reproduce
In the demo for "Toggle Stay Highlighted Area": click one area, say the ceiling. The ceiling is highlighted. Now click the ceiling again to toggle its highlighting off. The ceiling remains highlighted. Move the mouse out of the ceiling, say, onto the wall. NOW the ceiling shows as unhighlighted.
In the demo for "Stay Selected Highlighted Area": click one area, say the celing The ceiling is highlighted. Then click another area, say the window. The window is highlighted, but the ceiling is NOT unhighlighted. Move the mouse out of the window, say onto the surrounding wall. NOW the ceiling shows as unighlighted.
Expected behavior
Expected the unhighlighting of the previously highlighted area to be visible immediately after the click to give immediate feedback on the effect of the mouse click on the selection state.
Desktop
Describe the bug
When using Tailwind CSS on NextJS project the React Image Mapper not working. The image is in the source of the code, but not showing.
To Reproduce
Steps to reproduce the behavior:
Error Stack
No error shown in console.
Expected behavior
The image and mappers should work with tailwindcss.
Screenshots
https://prnt.sc/Vg-DRyCv4qrY
Desktop (please complete the following information):
Is your feature request related to a problem? Please describe.
I couldn't find a solution for programmatically setting selected areas.
I want to sync a map with a dropdown field. See picture.
Describe the solution you'd like
It would be great if the highlighted areas would be available as value
and to get the current set of active areas with onChange
, similar to how you would handle form inputs.
Of course, the value
could be overwritten to reflect the rendered areas.
Describe alternatives you've considered
I tried working around the problem (before I read the code) assuming I could set the img-mapper-area-highlighted
class on the area elements to highlight an area. Before I noticed that the canvas actually takes care of displaying the areas.
Is your feature request related to a problem? Please describe.
When I am trying to use the feature for onMouseDown it also allows me to drag the image behind the mapping. So if the user moves the mouse a little while holding the button it causing the image to go into dragging mode
Describe the solution you'd like
I'd like to prevent the image from being dragged at all, or have an option to enable this
Additional context
If you need to see an example of this happening I can DM you. Due to what I am working on I cannot share publicly
I suggest adding possibility to render a tooltip when hovering over specific area in the map, or adding custom classNames to area tag.
**Is your feature request related to a problem? I am having a gif and planning to use this. Not sure if this image mapper can help me with my gif.
Describe the solution you'd like
Support gif format too!
Describe alternatives you've considered
If this image mapper doesn't support gif, I am thinking to create a layer of transparent image overlay on my gif and allow interaction happened there.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.