Help Usage on Angular

[ishanuda]

Hi, This library seems to be an amazing one. I would like to know the way to use this in an Angular project. Ex: how to install and import to create the draggable obj.

Also, please if the library admin can enable the GitHub discussions for the general discussions it would be helpful to separate the issues from the library.

NOTE: Discussions can be enabled in the settings section of the repository.

Thank you very much.

[anseki]

Hi @ishanuda, thank you for the comment. You can import it by this:

import PlainDraggable from 'plain-draggable';

Also, you can install it by this command:

npm i plain-draggable

[ishanuda]

HI, @anseki,

I will try and come with feedback if anything is wrong. Also, could you please consider enabling the discussions feature so that this kind of discussion can be taken there separating the issues?

Thank you for the comment.

[anseki]

I don't know the GitHub discussions well, but I will think that when more requests come. Thank you for your recommendation. :smile: So, could you close this issue?

[ishanuda]

Hi @anseki, Thank you for the reply.

Feature of the discussion tab.

If you go to the settings the first tab (options) has the option to enable the discussions.

Thank you once again.

[anseki]

Thank you for the information! :smile:

[ishanuda]

Hi @anseki,

I tried the library as in the example and it gives me errors with the constructor.

https://stackblitz.com/edit/angular-ivy-kf9tfb?file=src%2Fapp%2Fapp.component.ts

Any idea of overcoming this error? Thank you very much.

[anseki]

Ah, you are using StackBlitz... Sorry, I don't understand StackBlitz well. The library in standard Angular project can work with e.g. Webpack. However, working with StackBlitz may be not easy because some libraries don't work with StackBlitz. Maybe you had better ask to StackBlitz team or use another library that is better.

[anseki]

Try this: https://stackblitz.com/edit/angular-ivy-mkm3q8?file=src%2Fapp%2Fapp.component.ts Note that I don't know whether this is good way or not.

[ishanuda]

Hi, Thank you for the information. I am sorry I created the example to bring you the issue. My project is a local one and I see what you have done. So I could add the library in the angular JSON file.

Now it is not giving the aforementioned error.

I am trying to parse an SVGRectangleElement to the lib but is not supported. It gives the Error: This element is not accepted.

This is the element I am trying to parse into the library. <rect id="rect_1" class="ra-shape rect" style="stroke: rgb(255, 0, 0); stroke-width: 1; stroke-opacity: 1; fill: rgb(175, 41, 76); fill-opacity: 1; pointer-events: all;"> </rect>

NOTE: the element is in an inline SVG which resides on the iFrame element.

Also, note that the example you created is not good and I think it is because of the Stackblitz. I tried to add the js in the Angular JSON file but it did not work on Stackblitz. But in the local project doing so, it seems working fine. However, still can not parse the element to it.

SIDE NOTE: So hope in the future the library will support Angular including type support of TypeScript. :-)

Thank you very much.

[anseki]

Try this: https://github.com/anseki/plain-draggable/issues/96#issuecomment-890284356 This example seems to work. I think that the StackBlitz is incomplete yet, and some libraries don't work with StackBlitz.

So, could you make new issue for another topic?

[ishanuda]

Hi,

Sure I will bring the issue to a new discussion.

Thank you very much.

[markmeehan99]

Hello! Congrats on a great library first of all. I am trying to use it on a fresh new Angular application but am having some issues. I am using the webpack and would expect the steps described in this previous reply would be enough. However, in the example you provided here, you include the script to the node_modules file, in the index.html file. I am new to NPM so I'm not proficient with it, but shouldn't this not be needed? I would expect the "import PlainDraggable from 'plain-draggable" to be enough. If I remove it, the draggable object doesn't seem to work. Is there any reason for this? Thanks in advance!

[anseki]

Hi @markmeehan99, thank you for the comment. You don't have to write the node_modules in the import path because Webpack get that from node_modules automatically. The example is a special case for StackBlitz. See: https://github.com/anseki/plain-draggable/issues/96#issuecomment-890274318