[Draggable unit?]

36 minutes ago, OSUblake said:

Hi @Jan The Ran 

 

Now that I see what you're trying to do, I think this might be a little easier. Not sure why you're using d3 when you can just use querySelectorAll.

 

Note that I added a blueprint attribute to the pieces. And getBBox() can be really confusing once you start using transforms.

https://greensock.com/forums/topic/13681-svg-gotchas/page/2/?tab=comments#comment-72060

 

 

 

Wow! Thank you so much!

Let me know where to send the paycheck

[Draggable unit?]

3 hours ago, OSUblake said:

If your <svg> element has a viewBox attribute, then your SVG coordinates are probably transformed.

 

Check out this demo. The <svg> element fills the entire screen. The gray box, a <rect> element, fills the svg 100%. Any white boxes around it are to preserve the aspect ratio. If you can resize the screen to be 1000x1000, the SVG and Screen coordinates will match, otherwise the svg coordinates will be transformed. Moving your mouse into the white area to the left or above the gray box will result in a negative value.

 

Study that demo carefully. The strange coordinates has nothing to do with gsap or Draggable. It's just how svg works.

Thank you. That makes sense!

 

So basically I assume I have to calculate everything to SVG coordinates since that's what I get as input to the liveSnap function.

How do I go about calculating the coordinates to return though?

I seem to miss the mark quite a bit. Codepen added!

 

See the Pen ExaKORB by zdzfzsdffdsaasdf (@zdzfzsdffdsaasdf) on CodePen

[Draggable unit?]

Hi. I am new to draggable and gsap.

 

I want to set a draggable path element that is inside a SVG element and snap it once is near a certain position.

        Draggable.create(".piece", 

            {

                //type:"x,y", 

                type:"x,y", 

                bounds:"#svg",

                onDragStart: this.onDragStart,

                liveSnap:{

                    points: this.snapIfPossible

                }

            }

        );

 

On my default view settings on my computer the width of the SVG is around 1k pixels. When I drag the element I get the payload object (point) containing an X and a Y of where I am dragging. However if I drag something from the far right to the far left on the SVG it says something like -200. So what unit is this and how do I compare it to pixels?

 

(ps: trying to do this in vue)

 

    snapIfPossible(point){

        if(!this.dragSource)

            return point;

        

        console.log(point.x, this.parentElement);

        

 

        for(var i=0; i<this.snapPoints.length; i++)

        {

            var snapPoint = this.snapPoints[i].getBBox();

            

            var dx = point.x + this.dragSource.x - snapPoint.x;

            var dy = point.y + this.dragSource.y - snapPoint.y;

 

            var distance = Math.sqrt(dx * dx + dy * dy)

            if (distance < 100) {

                return {x:snapPoint.x, y:snapPoint.y};

            }

            if(i === 0)

            {

                //console.log("dx", dx, "dragsource", this.dragSource.x, "snappoint", snapPoint, "point.x", point.x)

            }

        }

 

        return point; //otherwise don't change anything.

    },