svg.js v3 compatibility about svg.select.js HOT 27 OPEN

@pyuyu, sorry for the late response. The way you can enable resize and rotate is by using multiple plugins together:

...
  "dependencies": {
    "@svgdotjs/svg.js": "~3.0",
    "@svgdotjs/svg.select.js": "https://github.com/svgdotjs/svg.select.js.git#svgjs-v3",
    "@svgdotjs/svg.resize.js": "https://github.com/svgdotjs/svg.resize.js.git#svgjs-v3"
  }
...

<script src="./path/to/svg.js"></script>
<script src="./path/to/svg.select.js"></script>
<script src="./path/to/svg.resize.js"></script>

<div id="myDrawing"></div>

<script>
var drawing = new SVG('myDrawing').size(500, 500);
drawing.rect(50,50)
  .selectize()
  .resize()
</script>

Check out the demo page: https://svgjs.com/svg.resize.js/demo/index.html

It's a bit confusing is that the resize plugin takes care of the manipulations (rotate, resize, skew, move node) while the select only adds the control surface for them, so you cannot really use them without each other unless you programmatically want to manipulate an object.

from svg.select.js.

@aurelcarlier the missing function type-hint should be resolved with #63
though some of the options are not working on that branch yet.

from svg.select.js.

These plug-ins for version 3 are also not official yet.

from svg.select.js.

@Fuzzyma, I meant my project where I had heavily used SVG.js as the rendering engine. It would be interesting to see a revised version at some point; the v3 was already pretty great. Take your time with the project! In the future, I might be able to contribute here and there too. I just have my own project to boot up first 😉

from svg.select.js.

Eventually yes. Unfortunately my day only has 24h so that could take a while :).
Actually there should be a branch with the latest efforts but I am not convinced by that approach either

from svg.select.js.

Alright, I will give it a try today and see how it turns out.

from svg.select.js.

Well, I did not get very far... My browser console is always telling me

TypeError: resizableRect.selectize is not a function

I can't figure out how the function can be exported and recognized during the runtime. Actually, I just checkouted the branch svgjs-v3 and made only few changes without any significant progress:

• adding esm during the build,
• upgrade devDependencies (and adding typescript),
• using import '@svgdotjs/svg.select.js'; like other plugins.

Am I missing something obvious ? Do you have any suggestion to go further ?

from svg.select.js.

It worked when I used it. You just import it after importing svg.js. I am not aware of your bundling steps. For use with script tags you need to run npm run build to get the bundled version

from svg.select.js.

I think that's exactly what I did. Here are the steps I followed :

1. clone the repository to have it locally and checkout branch svgjs-v3
2. build to get the bundle version (I use node v10.20.1)

npm run build

3. change the package reference in my package.json file. Currently I have :

  "dependencies": {
    [...]
    "@svgdotjs/svg.draggable.js": "^3.0.2",
    "@svgdotjs/svg.js": "^3.0.16",
    "@svgdotjs/svg.panzoom.js": "^2.1.0",
    "@svgdotjs/svg.select.js": "../../svg.select.js",
    [...]
}

4. after yarn install in my project, my node_modules directory seems to have the correct dependencies :

5. in the code (written in typescript), the plugin is imported after svg.js, like other svg.js plugins

import { SVG } from '@svgdotjs/svg.js';
import '@svgdotjs/svg.panzoom.js';
import '@svgdotjs/svg.draggable.js';
import '@svgdotjs/svg.select.js';

[...]

const annotation = this.annotations.group();

const backRect = annotation
    .rect(w, h)
    .stroke({ color: 'black', width: 6 })
    .fill({ opacity: 0 })
    .x(x)
    .y(y);

const resizableRect = annotation
    .rect(w, h)
    .stroke({ color: 'rgb(23, 187, 185)', width: 3 })
    .fill({ opacity: 0 })
    .x(x)
    .y(y)
    .addClass('selectable');

annotation.on('click', () => {
    annotation.data('selected', true);
    resizableRect.selectize(); // <- problem here: TypeError: resizableRect.selectize is not a function
});

Maybe something is missing to use it with typescript ? Or the package reference is incorrect ? Any clue ?

from svg.select.js.

from svg.select.js.

First, thanks a lot for helping on this topic.

Indeed, casting resizableRect to any seems to do the job here, although my rectangle is filled in black for some reason.

Before click :

After Click :

Also options like rotationPoint or radius passed as parameters of the selectize function are not taken into account. Any suggestion ?

from svg.select.js.

You need to inclue the css file. Its needed to make the selection show up correctly.
Beside that: You are woring on a "work in progress" branch which has breaking changes. So you have to get your hands dirty and dig into the code to understand whats going on and what works and what now. There is a good chance that the options just dont get parsed at this point or are renamed.

from svg.select.js.

Is there any plan to be compatible with svg.js V3?

from svg.select.js.

Hey @pyuyu, I've been using this package with the v3 branch for a while now. So far it seems working fine, do you have a specific issue besides not having an actual ^3.0.0 in the package.json?

from svg.select.js.

Hey @pyuyu, I've been using this package with the v3 branch for a while now. So far it seems working fine, do you have a specific issue besides not having an actual ^3.0.0 in the package.json?

It did work with the v3 branch.
By the way, how can i add resize or rotate function to the points

from svg.select.js.

These plug-ins for version 3 are also not official yet.

True, though they work fine for the use-cases I had at least 😉
Granted, I did overhaul the select quite a bit with my own classes, but that's mostly because I needed my own custom UI instead of the built-in default.

from svg.select.js.

That's also the reason why these are 2 plugins in the first place so everyone could just replace one if needed

from svg.select.js.

How can i add ability to customize display of selection point handles in v3

from svg.select.js.

@chaoyifei I am afraid thats not possible without changing the code

from svg.select.js.

@chaoyifei I am afraid thats not possible without changing the code
thanks ,the Options has not support ? @Fuzzyma

from svg.select.js.

You can choose between rect and circle and style it with classes. Thats all you got.

from svg.select.js.

You can implement your select handler class (see: https://github.com/svgdotjs/svg.select.js/blob/svgjs-v3/src/select-handler.js) to render different things and then pass it to the .selectize(). That way, you can implement your handles with your style.

from svg.select.js.

@adaliszk knows my own code better than me :D

from svg.select.js.

Had worked with it to build a vector-graphic tool in the browser. It involved a lot of custom classes to utilise TypeScript, and I have a good memory of that. Overall the whole ecosystem is pleasant to work with; I am rather sad that my project died a while ago.

from svg.select.js.

You can implement your select handler class (see: https://github.com/svgdotjs/svg.select.js/blob/svgjs-v3/src/select-handler.js) to render different things and then pass it to the .selectize(). That way, you can implement your handles with your style.
@adaliszk i want to change circle size , extend the class?

from svg.select.js.

@chaoyifei pls read the readme: https://github.com/svgdotjs/svg.select.js#options

Its written down there

@adaliszk life happened :D. Its not dead tho. I am thinking about svg.js a lot!

from svg.select.js.

thanks,i have implement my select handler class, but what effect deepSelect

from svg.select.js.