Fix selecto and anchors on hover

This commit is contained in:
drew08t
2023-10-26 15:30:32 -07:00
parent 59b5c059cf
commit be24633e9c
2 changed files with 10 additions and 6 deletions
+2 -1
View File
@@ -385,7 +385,7 @@ export class Scene {
this.selecto = new Selecto({
container: this.div,
rootContainer: this.div,
rootContainer: this.transformComponentRef?.current?.instance.wrapperComponent,
selectableTargets: targetElements,
toggleContinueSelect: 'shift',
selectFromInside: false,
@@ -706,6 +706,7 @@ export class Scene {
this.moveable.zoom = 1 / scale;
}
}}
limitToBounds={true}
>
<div
style={{
@@ -103,7 +103,10 @@ export class Connections {
}
const elementBoundingRect = element.div!.getBoundingClientRect();
const parentBoundingRect = this.scene.div?.getBoundingClientRect();
const transformRef = this.scene.transformComponentRef?.current;
const parentBoundingRect = transformRef?.instance.wrapperComponent?.getBoundingClientRect();
const transScale = transformRef?.instance.transformState.scale ?? 1;
const relativeTop = elementBoundingRect.top - (parentBoundingRect?.top ?? 0);
const relativeLeft = elementBoundingRect.left - (parentBoundingRect?.left ?? 0);
@@ -111,10 +114,10 @@ export class Connections {
if (this.connectionAnchorDiv) {
this.connectionAnchorDiv.style.display = 'none';
this.connectionAnchorDiv.style.display = 'block';
this.connectionAnchorDiv.style.top = `${relativeTop}px`;
this.connectionAnchorDiv.style.left = `${relativeLeft}px`;
this.connectionAnchorDiv.style.height = `${elementBoundingRect.height}px`;
this.connectionAnchorDiv.style.width = `${elementBoundingRect.width}px`;
this.connectionAnchorDiv.style.top = `${relativeTop / transScale}px`;
this.connectionAnchorDiv.style.left = `${relativeLeft / transScale}px`;
this.connectionAnchorDiv.style.height = `${elementBoundingRect.height / transScale}px`;
this.connectionAnchorDiv.style.width = `${elementBoundingRect.width / transScale}px`;
}
};