konvajs / ng2-konva

Angular & Canvas - JavaScript library for drawing complex canvas graphics using Angular.
http://rafaelescala.com/ng2-konva/
119 stars 33 forks source link

Redo ng2-konva in Angular 16 #54

Closed haifishtime closed 1 year ago

haifishtime commented 1 year ago

Hey @rafaesc, @lavrton as I already said I was working on migrating the project to Angular 16.

I kept the general logic of the original project the same but added types to pretty much all objects to better understand what's happening. For that reason I had to change some things to make it work again.

In the projects directory you can see two projects. ng2-konva is the actual lib and demo is a little angular application with all of the original demo snippets implemented.

What is still missing is the doc application. Maybe you can help on updating that one. I don't know if there is anything special about that site. If I see that correctly this is the site found here, correct?

haifishtime commented 1 year ago

I created a local version of this package and refactored an application I'm working on to use this lib this week. I am displaying an image, drawing a couple hundred rects onto it and listening to events to display a dynamic tooltip on hover. I am happy to say I experienced no further issues related to this project.

benjaminkech commented 1 year ago

Thanks, @haifishtime! I refactored my Angular 16 app according to the newly introduced typings, making it compatible with Angular 16. This PR ensures that ng2-konva can continue to support Angular 16. @rafaesc and @lavrton, I kindly request your review and merge of this PR to maintain compatibility for other users. Thank you!

Jbz797 commented 1 year ago

Please merge

lavrton commented 1 year ago

I just released this version with next tag.

npm install ng2-konva@next

I need feedback and testing. Also, If possible, I am asking to create codesandbox examples. Something similar to examples in the repo: https://github.com/konvajs/ng2-konva/tree/master/projects/demo/src/app/examples As minimal as possible, so we can drop working links in the README. I am not familiar with Angular.

@haifishtime thanks a lot for your huge work.

Jbz797 commented 1 year ago

So far it's working very well for me, thank you for your work.

rmaleryk commented 1 year ago

Was it really necessary to delete KonvaModule?

haifishtime commented 1 year ago

Was it really necessary to delete KonvaModule?

To be honest it was probably not necessary to delete it but there is also no real point to keeping it.

It's just StageComponent and CoreShapeComponent which you need to import.

When I do another PR I will probably add it back as an option since there is no real disadvantage to having it.

rmaleryk commented 1 year ago

Was it really necessary to delete KonvaModule?

To be honest it was probably not necessary to delete it but there is also no real point to keeping it.

It's just StageComponent and CoreShapeComponent which you need to import.

When I do another PR I will probably add it back as an option since there is no real disadvantage to having it.

It is used to import these components into a custom module. Without it, I need to import them into a component and make it standalone, which breaks the architecture of my application. So I will be grateful if you return the module.

haifishtime commented 1 year ago

There is no need for you to do anything standalone. You can just import the components into any module. Just like the KonvaModule. The only thing that has changed is that you need 2 imports instead of one.

import { NgModule } from '@angular/core';
import { CoreShapeComponent, StageComponent } from 'ng2-konva';

@NgModule({
  imports: [StageComponent, CoreShapeComponent]
})
export class AppModule {}

You might also need to export the two components depending on the usage of your module.

rmaleryk commented 1 year ago

@haifishtime I remember, I tried to import them to the module, but it didn't work. But now I tried one more time and seems like everything is ok. Thanks!