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.

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

Forbidding movement when svg objects collide #141

Open
MaksSTV opened this issue Jan 17, 2024 · 1 comment
Open

Forbidding movement when svg objects collide #141

MaksSTV opened this issue Jan 17, 2024 · 1 comment

Comments

@MaksSTV
Copy link

MaksSTV commented Jan 17, 2024

Hi, I started using your library, I like what you have implemented. I have a question.

There is an svg border object (this is a cloud in the screenshot), it can have any shape. You can't go beyond it. There are internal objects (in the screenshot it is a rectangle), they can also have any shape.

I want that when I move the inner object, I cannot go beyond the boundaries of the outer one. To do this, I came up with the idea that it is possible to track this in the dragmove function, as you had in the manual-test example, but you use standard shapes there, I can't do that. Therefore, I thought that event stores the coordinates of svg paths in the current position and coordinates to the place where we want to move the object. But I couldn't find it. Are there any fields that store these coordinates?

Or, if you know another way, then I wouldn't mind hearing it. Thanks

.on("dragmove", (e) => {
          const { handler, box } = e.detail;
          e.preventDefault();
         let insideatPossibleFutureCoordinatesPath  //something that will give the coordinates of the new paths I'm going to move the object to
         const intersections = Intersection.intersect(
                    ShapeInfo.path(externalBorderPath),
                    ShapeInfo.path(insideatPossibleFutureCoordinatesPath)
                  );
          
          if(intersections.status !== "Intersection"){
            handler.move(x, y);
          }

          
        })

Снимок

@Fuzzyma
Copy link
Member

Fuzzyma commented Jun 27, 2024

I am not sure, what you mean by:

I thought that event stores the coordinates of svg paths in the current position

The event doesnt store anything. It just gives you the bounding box of the moved object.
You would need to intersect the inside object with the outside object and maybe move the inner object so that it stays inside.
However, that is pretty much nontrivial especially with paths

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants