svg.js v3 compatibility

[aurelcarlier]

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

[Fuzzyma]

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

[aurelcarlier]

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

[aurelcarlier]

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 ?

[Fuzzyma]

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

[aurelcarlier]

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 ?

[Fuzzyma]

if its just a typescript issue, just cast it to any. I am not even sure if there are any typings for the plugin and if so I didnt update them in a branch I intend to change

Am Fr., 17. Apr. 2020 um 16:45 Uhr schrieb Aurélien CARLIER < [email protected]>:

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

1. 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", [...] }

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

[image: image] https://user-images.githubusercontent.com/14922437/79538271-55199600-8084-11ea-8b3d-a115bac0604d.png

1. 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 ?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/svgdotjs/svg.select.js/issues/61#issuecomment-615073623, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA3AMPSIEJJ6NOGTQBCOQ7TRM73HZANCNFSM4MIQPA6Q .

[aurelcarlier]

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 ?

[Fuzzyma]

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.

[adaliszk]

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

[pyuyu]

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

[adaliszk]

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?

[pyuyu]

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

[adaliszk]

@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.

[Fuzzyma]

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

[adaliszk]

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.

[Fuzzyma]

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

[chaoyifei]

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

[Fuzzyma]

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

[chaoyifei]

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

[Fuzzyma]

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

[adaliszk]

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.

[Fuzzyma]

@adaliszk knows my own code better than me :D

[adaliszk]

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.

[chaoyifei]

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?

[Fuzzyma]

@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!

[adaliszk]

@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 😉

[chaoyifei]

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

[Fuzzyma]

I just released svg.select.js and svg.resize.js under the @svgdotjs namespace. They are now compatible with v3 of svg.js. You can install them with npm i @svgdotjs/svg.select.js @svgdotjs/svg.resize.js.

Feedback is welcome. The api changed a little bit since I basically rewrote everything