Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

The overlay is incorrectly positioned when the image for the markerarea is moved horizontally? #89

Open
Dima-369 opened this issue May 19, 2022 · 4 comments
Open

The overlay is incorrectly positioned when the image for the markerarea is moved horizontally? #89

Dima-369 opened this issue May 19, 2022 · 4 comments

Comments

@Dima-369
Copy link

I have this HTML file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>All defaults demo</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <script src="https://unpkg.com/markerjs2/markerjs2.js"></script>
    <script>
      function showMarkerArea(target) {
        const markerArea = new markerjs2.MarkerArea(target);
        markerArea.addEventListener(
          "render",
          (event) => (target.src = event.dataUrl)
        );
        markerArea.show();
      }
    </script>
  </head>
  <body>
    <div class="row">
      <div class="col">
        <div style="width: 300px"></div>
      </div>
      <div class="col">
        <div class="card">
          <div class="card-body">
            <img
              src="https://picsum.photos/900"
              onclick="showMarkerArea(this);"
            />
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

It displays like this initially:

image

After clicking on the image, I get this:

image

The overlay should appear exactly over the image, shouldn't it?
@ailon
Copy link
Owner

ailon commented May 20, 2022

Since bootstrap "card" does position: relative you need to specify it as the targetRoot for MarkerArea:

markerArea.target = document.getElementById('card');
markerArea.show();

...
<div class="card" id="card">

@ailon ailon closed this as completed May 20, 2022
@Dima-369
Copy link
Author

Aha, thank you for the quick answer!

@Dima-369
Copy link
Author

Puh, turns out that this just half of the issue I have in my codebase. I feel that there is a listener missing when the size of the MarkerArea changes? It gets correctly positioned once the browser window is resized?

Untitled.mov

This is the code I used (based on the previous code just with a button added):

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<title>All defaults demo</title>
	<link
			rel="stylesheet"
			href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
			integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
			crossorigin="anonymous"
	/>
	<script src="https://unpkg.com/markerjs2/markerjs2.js"></script>
	<script>
		let toggled = false;
		let markerArea;

		function toggleCol() {
			toggled = !toggled
			if (toggled) {
				document.getElementById("div-button").style.maxWidth = "300px"
			} else {
				document.getElementById("div-button").style.maxWidth = "60px"
			}
			// this does not work to properly reposition the MarkerArea
			// markerArea.render();
			// markerArea.show();
		}

		function showMarkerArea(target) {
			markerArea = new markerjs2.MarkerArea(target);
			markerArea.target = document.getElementById("card");

			markerArea.addEventListener(
				"render",
				(event) => (target.src = event.dataUrl)
			);
			markerArea.show();
		}
	</script>
</head>
<body>
<div class="row">
	<div class="col" id="div-button">
		<div>
			<button type="button" id="btn-toggle" class="btn btn-primary" onclick="toggleCol();">Change column
				size</button>
		</div>
	</div>
	<div class="col">
		<div class="card" id="card">
			<div class="card-body">
				<img
						src="https://picsum.photos/900"
						onclick="showMarkerArea(this);"
						alt="Test Image"/>
			</div>
		</div>
	</div>
</div>
</body>
</html>

@ailon
Copy link
Owner

ailon commented May 20, 2022

Hmm... Yes, when it's neither window nor the image itself that is resizing then marker.js won't react. I'm not sure if there's a way to listen to all sizing changes across all parent elements but I will investigate.

Additionally, there's some extra weirdness due to whatever styles bootstrap's "card" applies. Will look into that too.

Overall, though, I'd recommend using "popup" mode in marker.js for marking up images in "fluid" environments.

markerArea.settings.displayMode = 'popup';

@ailon ailon reopened this May 20, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ailon @Dima-369