Comments (1)
One more reliable way seems to be to use the following, which takes the parents' offsets into account:
const bounds = getAbsoluteBounds(element);
const baseDiv = document.getElementById(this.options.baseDiv);
if (baseDiv && baseDiv.parentElement && !baseDiv.parentElement.id.includes("hidden")) {
let x = bounds.x + element.root.canvasBounds.x;
let y = bounds.y + element.root.canvasBounds.y;
let container = baseDiv;
if (container) {
while (container.offsetParent instanceof HTMLElement && (container = <HTMLElement>container.offsetParent)) {
x -= container.offsetLeft;
y -= container.offsetTop;
}
}
}
However, this still doesn't work for auto-layouted edge labels, as can be seen in dashed red rectangles in the below picture. The dashed red rectangles is what the code above returns.
Imho, the most reliable way is to make use of Element.getBoundingClientRect()
and additionally take the offsets of the container hierarchy into account:
const svgElementId = domHelper.createUniqueDOMElementId(element);
const svgElement = document.getElementById(svgElementId);
if (svgElement) {
const rect = svgElement.getBoundingClientRect();
const body = document.body;
const docElement = document.documentElement;
const scrollTop = window.pageYOffset || docElement.scrollTop || body.scrollTop;
const scrollLeft = window.pageXOffset || docElement.scrollLeft || body.scrollLeft;
const clientTop = docElement.clientTop || body.clientTop || 0;
const clientLeft = docElement.clientLeft || body.clientLeft || 0;
x = rect.left + scrollLeft - clientLeft;
y = rect.top + scrollTop - clientTop;
width = rect.right - rect.left;
height = rect.bottom - rect.top;
}
let container = document.getElementById(viewerOptions.baseDiv);
if (container) {
while (container.offsetParent instanceof HTMLElement
&& (container = <HTMLElement>container.offsetParent)) {
x -= container.offsetLeft;
y -= container.offsetTop;
}
}
Using the code above, we get the blue dotted rectangles in the picture below.
This seems to work nicely with and without any offsetting in the HTML container hierarchy and also works independently of the zoom level (sorry, I had to show this cool effect ;)):
I'll open a PR on that. Please let me know what you think.
from sprotty.
Related Issues (20)
- v0.13.0 Regression: Repeated reconnections of edges deterministically break dragging HOT 1
- Make it possible to scroll the viewport using alt+wheel HOT 1
- Context Menu on Label/Button is not shown HOT 8
- is there a way that LangiumDiagramGenerator class can enable more features (hover, popup, etc) like ModelSource class? HOT 1
- Label placement wrong with no Rotate and edgePlacement 'on' HOT 1
- Bad dev experience with edge selection and routing HOT 1
- Port constraint FIXED_SIDE doesnt seam to work HOT 1
- which technologies should i choice HOT 2
- which technologies should i choice HOT 1
- sprotty-vscode tranform confused HOT 10
- Reconsider generic definiton of `RequestAction` HOT 3
- SCompartment question HOT 1
- Conflicting request IDs in client and server
- generator-sprotty is not part of the sprotty organization HOT 2
- Remove `SModelExtension` interface HOT 1
- Remove test-helper and jsdom dependency HOT 3
- Data Elements HOT 3
- Edge created while dragging from a port is deleted after any model change HOT 3
- Zoom in or out results in a bad scroll offset for the last handled WheelEvent HOT 1
- SVG export doesn't work when ProjectedViewport is used
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from sprotty.