Svg.js: svg rectangle with select resize and draggy

[sacer6]

Hi, I'm trying to do a rectangle can resize and drag, but doesn't work for me
I was add a svg.js library and svg.select, svg.resize and svg.draggy
Are incompatible or something?

Thanks for all

[Fuzzyma]

Try the official plugin svg.draggable.js

sacer6 [email protected] schrieb am Fr., 15.01.2016, 11:32:

Hi, I'm trying to do a rectangle can resize and drag, but doesn't work for
me
I was add a svgjs library and svgselect, svgresize and svgdraggy
Are incompatible or something?

Thanks for all

—
Reply to this email directly or view it on GitHub
https://github.com/wout/svg.js/issues/439.

[sacer6]

Hey there, thanks for your help
I tried what you said and still does not work
My code is

svg = new SVG(document.querySelector("#SvgDiv")).size("100%", "100%");
svg.rect(100, 100).resize().selectize({ deepSelect: true }).draggable();

[sacer6]

Thanks for all, it works now

[Fuzzyma]

I am curious was the mistake was :)

sacer6 [email protected] schrieb am Fr., 15.01.2016, 12:24:

Thanks for all, it works now

—
Reply to this email directly or view it on GitHub
https://github.com/wout/svg.js/issues/439#issuecomment-171937489.

[aduryagin]

Hi, still doesn't work

Code:
rectangle = activeRoomSVG.rect().draggable().selectize().resize().attr({ fill: '#80a47d' }).draw();

[Fuzzyma]

Any reason why you make it draggable, selected and resizeable when it's not even drawn? Call all this methods when the corresponding draw event is fired

[aduryagin]

I created pull request with description of a problem https://github.com/Fuzzyma/svg.select.js/pull/25

[Fuzzyma]

actually you did not describe your problem. I have still no idea what your problem is and what you claim to have been solved there. So please be a bit more specific about your bug!

Furtermore: In your demo you use outdated code. Dont use the code from the demo side. Its working for the demos but not for all use cases.

[aduryagin]

Outdated code is not a reason of a bug) Updated demo: http://codepen.io/aiduryagin/pen/KrYbXK

The problem is that if a css file has a css rule
* { pointer-events: auto!important; }
this rectangle

prevents dragging of first <rect id="SvgjsRect1009" ... ></rect> element

[Fuzzyma]

I dont see this. I can drag it and draw it and resize it without any problem

[aduryagin]

Hm... In my demo i can't drag it. Browsers: Chrome 52, Chrome 54 canary, Firefox 48

[Fuzzyma]

But you draw it first, right? Because dragging without drawing makes no sense

[aduryagin]

Whatever. Even if element has already been drawn. Example: http://codepen.io/aiduryagin/pen/KrYbXK

[Fuzzyma]

Oh cmon - you enable pointerevents on purpose for all elements with

* {
  pointer-events: auto!important;
}

and then you wonder, why the rect gets in the way when dragging.
Thats not the plugins fault. You have to take care of your css yourself.
However: changing the css at the right place would solve this issue, too:

.svg_select_boundingRect{
    stroke-width:1;
    fill:gray;
    stroke-dasharray:10 10;
    stroke:black;
    stroke-opacity:0.8;
    fill-opacity:0.1;
    pointer-events:none !important; /* important added */
}

This issue would have been solved quite fast when you just would have simplified your code down to the actual problem!!

[aduryagin]

I solved the problem yesterday. I tried to explain you that the problem exists and where she is. My solution: https://github.com/Fuzzyma/svg.select.js/pull/25/commits/521a626d8b04ded936b983c2087d5e150f32122d

[Fuzzyma]

Yeah I saw your PR. However I aim for as little dom pollution as possible. Also lines instead of rects make this whole thing a bit overcomplicated. Imo just set the pointer-events to important as stated above.