svg.js v3 compatibility #61

aurelcarlier · 2020-04-15T12:02:42Z

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

Fuzzyma · 2020-04-16T04:55:23Z

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 · 2020-04-16T05:47:04Z

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

aurelcarlier · 2020-04-16T15:52:03Z

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 · 2020-04-16T22:10:38Z

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 · 2020-04-17T06:45:03Z

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

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

npm run build

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

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

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 · 2020-04-17T07:39:25Z

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 < notifications@github.com>:

…

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": { [...] ***@***.***/svg.draggable.js": "^3.0.2", ***@***.***/svg.js": "^3.0.16", ***@***.***/svg.panzoom.js": "^2.1.0", ***@***.***/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 ***@***.***/svg.js';import ***@***.***/svg.panzoom.js';import ***@***.***/svg.draggable.js';import ***@***.***/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 <#61 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA3AMPSIEJJ6NOGTQBCOQ7TRM73HZANCNFSM4MIQPA6Q> .

aurelcarlier · 2020-04-17T15:46:13Z

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 · 2020-04-18T01:58:26Z

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 · 2020-09-23T02:23:29Z

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

pyuyu · 2021-02-02T03:34:51Z

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

adaliszk · 2021-02-02T10:48:42Z

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 · 2021-02-02T12:27:02Z

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 · 2021-02-09T07:19:53Z

@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 · 2021-02-09T07:37:00Z

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

adaliszk · 2021-02-09T09:29:03Z

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 · 2021-02-09T09:34:47Z

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

chaoyifei · 2023-01-10T07:59:30Z

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

Fuzzyma · 2023-01-10T08:34:37Z

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

chaoyifei · 2023-01-10T09:23:13Z

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

Fuzzyma · 2023-01-10T09:25:30Z

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

adaliszk · 2023-01-10T09:52:31Z

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 · 2023-01-10T10:06:17Z

@adaliszk knows my own code better than me :D

adaliszk · 2023-01-10T10:24:21Z

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 · 2023-01-10T10:41:59Z

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 · 2023-01-10T10:45:06Z

@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 · 2023-01-10T11:20:47Z

@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 · 2023-01-10T13:52:55Z

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

Fuzzyma · 2024-06-30T19:15:25Z

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

adaliszk mentioned this issue Sep 23, 2020

ES6/Typescript update for v3 #63

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

svg.js v3 compatibility #61

svg.js v3 compatibility #61

aurelcarlier commented Apr 15, 2020

Fuzzyma commented Apr 16, 2020

aurelcarlier commented Apr 16, 2020

aurelcarlier commented Apr 16, 2020

Fuzzyma commented Apr 16, 2020

aurelcarlier commented Apr 17, 2020

Fuzzyma commented Apr 17, 2020 via email

aurelcarlier commented Apr 17, 2020

Fuzzyma commented Apr 18, 2020

adaliszk commented Sep 23, 2020

pyuyu commented Feb 2, 2021

adaliszk commented Feb 2, 2021

pyuyu commented Feb 2, 2021

adaliszk commented Feb 9, 2021

Fuzzyma commented Feb 9, 2021

adaliszk commented Feb 9, 2021

Fuzzyma commented Feb 9, 2021

chaoyifei commented Jan 10, 2023 •

edited

Loading

Fuzzyma commented Jan 10, 2023

chaoyifei commented Jan 10, 2023

Fuzzyma commented Jan 10, 2023

adaliszk commented Jan 10, 2023

Fuzzyma commented Jan 10, 2023

adaliszk commented Jan 10, 2023 •

edited

Loading

chaoyifei commented Jan 10, 2023

Fuzzyma commented Jan 10, 2023

adaliszk commented Jan 10, 2023

chaoyifei commented Jan 10, 2023

Fuzzyma commented Jun 30, 2024

svg.js v3 compatibility #61

svg.js v3 compatibility #61

Comments

aurelcarlier commented Apr 15, 2020

Fuzzyma commented Apr 16, 2020

aurelcarlier commented Apr 16, 2020

aurelcarlier commented Apr 16, 2020

Fuzzyma commented Apr 16, 2020

aurelcarlier commented Apr 17, 2020

Fuzzyma commented Apr 17, 2020 via email

aurelcarlier commented Apr 17, 2020

Fuzzyma commented Apr 18, 2020

adaliszk commented Sep 23, 2020

pyuyu commented Feb 2, 2021

adaliszk commented Feb 2, 2021

pyuyu commented Feb 2, 2021

adaliszk commented Feb 9, 2021

Fuzzyma commented Feb 9, 2021

adaliszk commented Feb 9, 2021

Fuzzyma commented Feb 9, 2021

chaoyifei commented Jan 10, 2023 • edited Loading

Fuzzyma commented Jan 10, 2023

chaoyifei commented Jan 10, 2023

Fuzzyma commented Jan 10, 2023

adaliszk commented Jan 10, 2023

Fuzzyma commented Jan 10, 2023

adaliszk commented Jan 10, 2023 • edited Loading

chaoyifei commented Jan 10, 2023

Fuzzyma commented Jan 10, 2023

adaliszk commented Jan 10, 2023

chaoyifei commented Jan 10, 2023

Fuzzyma commented Jun 30, 2024

chaoyifei commented Jan 10, 2023 •

edited

Loading

adaliszk commented Jan 10, 2023 •

edited

Loading