svgdotjs / svg.select.js Goto Github PK

View Code? Open in Web Editor NEW

90.0 90.0 65.0 195 KB

An extension of svg.js which allows to select an element

License: MIT License

CSS 4.62% JavaScript 95.38%

svg.select.js's People

Contributors

Stargazers

Watchers

Forkers

timse parabolika66 shorelineas yirvan ionicabizaukitchen johnhardy dmmitryis pallat hollste elmaghri ibitcloud sky370512 jaichandra zkr940110 sikara57 husseinabed 545191228 razvanioan peterpanbest ssadams11 greencodio zhangjianq alixander clusterberries clarkfeng sdaverede manuel994 1652866741 tingshuai cmatzenbach simon21cn p1xelway nainslie robindepege undeadinu lizhengzhou janmisker jeretapaninen zonciu prateek14 valleyzine xiaolshi lucas-janon jzb1205 tomwerkheiser doc22940 vcloudsail boat3471 liuzlzuil sierraxdev wangpanhb yimisunrise theendurance zhenliliu cosdyt dumin21 melvitaandrade suoni hup-1 isabella232 benworushi ehtick rlarin q394304565

svg.select.js's Issues

Select text

Seems that's not working. Maybe placing the text in a rectangle?

bower.json: wrong svg.js version number

Hey Fuzzma,

thanks for all the work you've put into these plugins (select, resize and draw).

The bower.json needs an update because it's referring to the old SVG.js version (whereas the package.json isn't).

Documentation mistake

Hi!

Thanks for this awesome addon!

On this site https://svgjs.com/svg.select.js/ the documentation says:

var drawing = new SVG('myDrawing').size(500, 500); drawing.rect(50,50).select()

but its wrong now it should be:

var drawing = new SVG('myDrawing').size(500, 500); drawing.rect(50,50).selectize()

svg.js v3 compatibility

Are you planning to update this plugin (and also svg.resize.js) so that it could be used with svg.js v3 ?

Not an issue but more a request, is it possible to only select left or right

is it possible to only select left or right and not top, bottom en corners?

How to destroy?

When removeing an element, the circles should disappear. Is it possible to destroy the selectize instance?

this.parent.group is not a function

When calling the (now renamed) selectize function, I get the error from the title everywhere I try.

The following code worked with the 2.7.x branch, but it doesn't anymore after renaming the method to selectize:

img.select(':not(image):not(defs)').each(function (i, children) {
    allElements.push(this);
    makeElementInteractive(this, false);
});

What can I do?

svg.select.min.js:1 Uncaught TypeError: this.parent.group is not a function
at i.init (svg.select.min.js:1)
at Svg.selectize (svg.select.min.js:1)
at Object.openAnnotationEditor (diagnosis.js:918)
at Object.eval (eval at parseBindingsString (knockout.js:74), :3:148)
at HTMLDivElement. (knockout.js:100)
at HTMLDivElement.dispatch (jquery-3.3.1.min.js:2)
at HTMLDivElement.y.handle (jquery-3.3.1.min.js:2)

select an svg by clicking on it?

I have just started using your fantastic library.
Could you please let me know how can I select an svg after I click on it? Cheers.

viewBox?

Really great plugin! Thanks! This unfortunately does not work together with viewBoxed svgs. Dragging works fine but resizing fails. Any chance to add this?

Uncaught TypeError: Cannot set property 'detail' of undefined

the first time clicking on a handle produces this console warning

Uncaught TypeError: Cannot set property 'detail' of undefined

I tested this in the debugger and it happens as follows

svg.select.getMoseDownFunc then fires the event with

 _this.el.fire(eventName, {x: ev.pageX, y: ev.pageY});

the warning occurs svg.fire

 return e.events[t].detail = n, this.node.dispatchEvent(e.events[t]), delete e.events[t].detail, this

my test code is

var draw = SVG('drawing').size(500, 500);
var rect = draw.rect(100, 400).attr({fill: '#f06'}).move(100,100);
rect.select();

svg select.js is ready for use?

Hi, Fuzzyma!

I am new to SVG.

I test your svg.select.js in my project ,but it does not work, it seems nothing was selected.

Any thing wrong?

Here is my code:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/vendor/svg.select.css">

    <script src="js/vendor/svg.js"></script>
    <script src="js/vendor/svg.draggable.js"></script>
    <script src="js/vendor/svg.select.js"></script>
</head>
<body>
<div id="canvas"></div>
<script type="text/javascript">
    if (SVG.supported) {
        var draw = SVG('canvas').size('100%', '100%')
        var rect = draw.rect(100,100);
        rect.select();
        rect.draggable();
    } else {
        alert('SVG not supported')
    }
</script>

</body>
</html>

Can you help me ? Or show me a full example may be a big help. thx.

2.1.1 on NPM

It's possible to install v2.1.1 using npm?

I think that the last version published is v2.0.3:

https://www.npmjs.com/package/svg.select.js

how to check whether current element is selected or not from Code point of view

Is there any way to check the status of the Selectize on an object is true or false.
Something similar to hasAttribute of Javascript.

Thanks in advance.

Error

When I use the svg.select.min.js linked on demo page then it gives me error

svg.select.min.js:4 Uncaught TypeError: a.parent._parent is not a function
    at new b (svg.select.min.js:4)
    at e.select (svg.select.min.js:4)

If use latest svg.select.min.js given in dist folder on project roort

Uncaught TypeError: myCanvas.rect(...).select is not a function

Code

myCanvas = new SVG('work-canvas').size(500,500);
var rect = myCanvas.rect(45,300).select();

Exception when option points is false.

I am using your library and the https://github.com/wout/svg.draggable.js library together to drag an item but did not want to have any points on the selection rectangle. When I drag, I get the exception commented below on line 135. I also made a commment on the fix. I fixed my local file and can confirm it works.

SelectHandler.prototype.updateRectSelection = function () {
...
if (this.options.rotationPoint) {
// if this.options.points == false, set.get(9), should be set.get(1)
this.rectSelection.set.get(9).center(bbox.width / 2, 20); // here is the exception: Unable to get property 'center' of undefined or null reference
}
};

Caching the parent can cause issues with drawing the section box

If the svg element was selected and then you move this element to a new parent. Once moved, then remove or hide the original parent, the selection box will not be drawn or will be hidden because it still wants to draw it in the original parent.

flag touchstart event handlers as passive: false

Not a critical issue, but when the svg.select.js library is used in an app, chrome outputs several warnings to the console when an SVG element is selected:

[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

Taking a look at the code it appears that the different touchstart events in the code always trigger preventDefault, so it seems that all of the touchstart events in the library could be flagged as passive: false to eliminate these console warnings.

import of svg.select.js as ES6 module

While using svg.js in angular2 application, i could import svg.js, but when trying to import svg.select.js the selectize() method is not recognized.

import * as SVG from 'svg.js'
import 'svg.select.js'

any thoughts what could be wrong or any update on when we can get compatible ES6 modules for all plugins for svg.js

Change position of the rotate cirlce

Is it possible to set custom positions for control points?

SVG.js 2.0?

Hi,

does this plugin (and your other ones) support SVG.js 2.0? If yes, could you update the bower.json please?

Unselecting doesn't work when using deepSelect: true on a line element

Hey,

thanks for your amazing svg.js plugin. I am currently building an SVG editor using it.

The title says it all.. here's a JSFiddle:

http://jsfiddle.net/8sdrfdun/1/

Would be great if you could have a look on this.

line.select(false) does not remove point circles

My code reads:

selectedElement.select(false);

when selectedElement is anything other than a line the selection box is hidden properly.

how can i get select points x,y ?

hi,! thanks for your plugin! im using svg.js with svg.select.js, svg.draggable.js and svg.resize.js and im trying to find a way to get x,y values for each points, after resize, rotate, or drag my object and im stucked.

any ideas?

Using selectize() ignores any fill style

I am using version "svg.select.js": "^2.1.2" in my project. When call selectize on the element, the fill color is ignored and it just renders a black shape.

Here is how i am using it:

`const draw = svg(this.$refs.shape).size(1000, 1000);
  const rect = draw
  .rect(100, 100)
  .fill("#f06")
  .move(20, 40);

rect.selectize();`

Selecting with the mouse

Hi! I'm trying to use svg.select.js on a my own draw editor. The problem is that is impossible select the entity with the mouse. I have a simple SVG created canvas with svg.draw I have created the entities (some rectangles) every time I put, with the mouse one of it, the software unfocus the last one and focuses the new one. At the end I have the last edited rectangle selected. At this point I enable the event 'mouseon' and like your sample (http://fuzzyma.github.io/svg.select.js/demo/index.html), I am trying to use your code : SVG.select().select({deepSelect:true}); It doesn't works. I have tryed also with SVG.select().selectize({deepSelect:true}); with or without deep select. It seems not working.
what is wrong in my code?

Thanks for your help.
GildoMat

Determine whether a svg is selected.

Hi, is there a way to determine whether a svg is selected? Just like the selected Attribute?

when use symbols,the rect's position is wrong

Thanks for your plugin,

when i use the symbol ,i got a problem

var draw = SVG('drawing').size(300, 300)

var symbol = draw.symbol()
symbol.rect(100, 100).fill('#f09')

var use  = draw.use(symbol).move(100, 100)
use.selectize()

the rect's position is wrong

Doesn't work with latest version

The following select demo code only works with this older svg.min.js, but not the most recent version of svg.min.js.

        var drawing = new SVG('drawing').size('100%', '100%');

        var poly = drawing.polygon('350,50 283,250 450,122 250,122 416,250')
            .attr('pointer-events', "visible");

        poly.on('mousedown', function (e) {
            poly.select().select({
                deepSelect: true
            });
        }, false);

'''

http://svgjs.com/svg.select.js/demo/svg.min.js

Remove brakes the select process

Hello guys,

Here's my problem:
I have a tool using svg.js (2.7.1) with panzoom (1.2.3), draggable (2.2.1), select (2.1.2), resize (1.4.3), draw (2.0.4).

When I add a shape, it is made draggable. When I click a shape, it is selected and made resizable.

When I select a shape and then REMOVE it (myEl.remove();), all is well, but afterwards no other shapes can be selected. The following error is given when trying to select another shape:

Uncaught TypeError: Cannot read property 'group' of null
at t.init (svg.select.min.js:1)
at e.selectize (svg.select.min.js:1)
at deselectShape (index.php:111)
at selectShape (index.php:99)
at e. (index.php:73)

Can anyone please help?
Thanks.

this.parent.set is not a function

Using the latest version of svg.js and svg.select.js

Following the example, I get Uncaught TypeError: this.parent.set is not a function

        let draw = SVG('#stage').size(window.innerWidth, window.innerHeight)
        let rect = draw.rect(100, 100).attr({ fill: '#f06' })
        rect.selectize().resize()

Thanks!

Support deepselect on circle and ellipse

Currently deepselect produce 8 points positioned like rect()

It would be nice to have it produce only 4 points like this

Uncaught TypeError: el.parent is not a function

var draw = SVG('drawing').size(500, 500);
var rect = draw.rect(100, 100);
rect.selectize();

nearly, I run the demo source on github, but met an error like below:
Uncaught TypeError: el.parent is not a function. where is my fault?

Drag selectRect

Hi everyone ! This is a great plugin, and I have a problem when I use with svg.draggable.js. If I try to drag an element that use select and draggable you can't drag the element.

rect.selectize().draggable()

Is there any way to allow the drag in the "rectSelection" to move the svg element?

The current version is broken

Some references to the old select object still exist:

I tried to fix this, but then the next problem is an infinite recursive (?) call happening here: https://github.com/Fuzzyma/svg.select.js/blob/7bc54c47604686071efb9ab2dbefe531f0dacdec/src/svg.select.js#L212

This was not happening in the previous version. This appears when having a draggable element. 💥

selectize({points:['t','rt']}); It's cannot only show two points as I do like this

I need only two points when I selected an elements in SVG ，but it shows all points .it does not work,
How cloud I do....

The problem of moving callback functions

Hello,I have a question for you.When using the selectize method, I need to be able to move a module and get a parameter back to me so I can do something else

Selecting ForeignObject

ForObjectDemo.zip

Hi i am using the Foreign Object plugin for creating a editable text.
Basically a DIV inside the foreignobject with Contenteditable Attribute set to TRUE for the DIV object.
After creating i wanted the ForObject element to be draggaed and resized.

But when the object is selected for resizing (Selectize() method), the Viewport[Outer Rectangle box] of the element is displayed based on the X=0,Y=0 position of the container irrespective of the ForObject position on the SVG container.

The draggable, selectize and the Resize functions are called on the ForObject element.

Thanks in Advance for the help.

Eval is not the best practice and it may lead to errors

Hi!

I'm working on Electron application and it uses svg.js and svg.select.js libs. The Electron documentation advises to disable or override eval. So the app has content-security-policy metatag that disables eval. It lead to errors in svg.select.js lib, because it uses eval.
Do you have any plans to change it? Thanks!

Imported SVGs are not able to be selected

I left a comment on another issue, but this really is a separate problem entirely so I felt it deserves its own ticket. I have an application where the user draws SVG annotations over an image, and I am stringifying and saving those annotations in a database. When the user comes back to an annotated image, I pull them from the db, de-stringify them, and import them via the instructions on the svg.js website.

This works perfectly, and the SVGs are rendered in the exact same location on the image. I then put a click callback on them to call selectize, but when I click on them, I get the error "Uncaught TypeError: this.parent.group is not a function". The error is occurring on svg.select.js line 109.

I did some debugging, and looked to just fix the issue myself, but it seems to lie in the state objects being passed, and I do not understand exactly what's happening. If I draw new SVGs, I can select them just fine - the click handler for selectize works. Debugging this more, I found that for new SVGs, an "initializer" object is being passed to selectize, which is able to grab this.parent.group() on line 109 (logging out this.el gives me the "initializer" object with its node being the SVG shape (i.e. <rect> or <circle>), while logging this.parent gives me a "create" object, with the node being an <svg> element). For imported SVGs, however, an "initializer" object is not being passed - instead the "create" object is. Thus it gets the wrong parent, and thus .group() fails.

From what I can see, the only time you get an "initializer" object is from calls like var rect = draw.rect(). Import calls like var mysvg = draw.svg('<g><rect ....></rect></g>') give you a "create" object, which do not work when passed to selectize(), and I do not know how to get the "initializer" object from them. How can I make this work with svg.select.js? I'm more than happy to modify and submit a PR if further direction or guidance is given.

Thanks for the great library!

Help - dealing with multiple selection

How would you recommend when dealing with multiple selected objects ?

I like that the current implementation does not affect selected object structure, but for dealing with multiple selected objects , I dont see any other way than upon selection , adding the selected object to a group and then selectize on the group.

But this is:

changing the document structure which is not desirable
have unknown transform effects

What do you think ?

I would take this path as SVG.js is still very light compared to Konva or Fabric that include such methods, but It is hard to just use browser's inspect element that I so like when using SVG.js

changing circles with rects

hello
I would like to thank you for the great work
I would to customize the circles with a small rects. how can i do this ??

Compatibility with svg.js 3.0.12

Is this compatible with svg.js 3.0.12?

I'm trying something like this:

var draw = SVG.find('#svg-element')[0];
var rect = draw.rect(100,100);
rect.selectize()

and i get the error:
svg.select.js:255 Uncaught TypeError: this.parent.set is not a function
at SelectHandler.push../node_modules/svg.select.js/dist/svg.select.js.SelectHandler.selectRect (svg.select.js:255)
at SelectHandler.push../node_modules/svg.select.js/dist/svg.select.js.SelectHandler.init (svg.select.js:116)
at Rect.selectize (svg.select.js:402)
at :1:6

select after modifying the point list from outside the lib

Hi, I'm having trouble selecting a polygon a second time. I have the problem because I am using redux-undo, so when I try to select the polygon after modifying the list of points from outside (without executing updatePosition of the element), when I select the element again, the points are what I had before. Is there a way to reset the list of points, or force new SelectHandler?
Thank you very much!

Please increment the version...

Hey,

I think this is the fault for the issue I have right now:

bower.cmd install svg.resize.js
bower svg.resize.js#*       not-cached git://github.com/Fuzzyma/svg.resize.js.git#*
bower svg.resize.js#*          resolve git://github.com/Fuzzyma/svg.resize.js.git#*
bower svg.resize.js#*         download https://github.com/Fuzzyma/svg.resize.js/archive/1.1.0.tar.gz
bower svg.resize.js#*          extract archive.tar.gz
bower svg.resize.js#*         resolved git://github.com/Fuzzyma/svg.resize.js.git#1.1.0
bower svg.select.js#^1.0.4  not-cached git://github.com/Fuzzyma/svg.select.js.git#^1.0.4
bower svg.select.js#^1.0.4     resolve git://github.com/Fuzzyma/svg.select.js.git#^1.0.4
bower svg.js#^2.0.2         not-cached git://github.com/wout/svg.js.git#^2.0.2
bower svg.js#^2.0.2            resolve git://github.com/wout/svg.js.git#^2.0.2
bower svg.select.js#^1.0.4    download https://github.com/Fuzzyma/svg.select.js/archive/1.0.4.tar.gz
bower svg.js#^2.0.2           download https://github.com/wout/svg.js/archive/2.0.2.tar.gz
bower svg.select.js#^1.0.4     extract archive.tar.gz
bower svg.select.js#^1.0.4    resolved git://github.com/Fuzzyma/svg.select.js.git#1.0.4
bower svg.js#1.1.x          not-cached git://github.com/wout/svg.js.git#1.1.x
bower svg.js#1.1.x             resolve git://github.com/wout/svg.js.git#1.1.x
bower svg.js#1.1.x            download https://github.com/wout/svg.js/archive/1.1.0.tar.gz
bower svg.js#^2.0.2            extract archive.tar.gz
bower svg.js#^2.0.2           resolved git://github.com/wout/svg.js.git#2.0.2
bower svg.js#1.1.x             extract archive.tar.gz
bower svg.js#1.1.x            resolved git://github.com/wout/svg.js.git#1.1.0
bower                        ECONFLICT Unable to find suitable version for svg.js

I think this could be due to bower loading the "old" bower.json with "dependencies" set to SVG.js version 1.x... but I'm not 100% sure.