Podejmuję się zadania ponownego napisania następującej aplikacji Flash w HTML5:

http://www.docircuits.com/circuit-editor

Biorąc pod uwagę złożoność aplikacji i dotychczasowych badań i rozwoju, zidentyfikowałem AngularJS jako preferowaną platformę MVC do implementacji. Aplikacja zawiera różne części, takie jak panele, menu, właściwości, wykresy itp., Z których wszystkie, jak sądzę, można łatwo zaimplementować w AngularJS.

Kluczowym problemem jest jednak to, że projektowanie komponentów i interakcja (takie jak przeciąganie / upuszczanie, przenoszenie, obsługa drutu itp.) Muszą być oparte na płótnie, ponieważ byłem w stanie wyeksportować wszystkie grafiki wektorowe z Flash przy użyciu zestaw narzędzi CreateJS (http://www.adobe.com/in/products/flash/flash-to-html5.html) do biblioteki Canvas, a nie do SVG.

Problem polega na tym, że nie ma jasnego sposobu komunikacji między „pojedynczymi obiektami wewnątrz płótna” a AngularJS. Przejrzałem następujące przykłady, ale prawie wszystkie z nich działają na obiekcie canvas, a nie na obsłudze poszczególnych komponentów wewnątrz Canvas:

Wiązanie AngularJS do WebGL / Canvas

Czy istnieje już dyrektywa dotycząca rysowania na płótnie dla AngularJS?

Utknąłem tutaj i nie wiem, co robić. Byłbym wdzięczny za kilka komentarzy na temat:

Czy AngularJS jest właściwym wyborem?

Czy powinienem spróbować zaimplementować część Canvas w innej bibliotece (takiej jak Fabric.js, kinect.js, Easel.js) i zintegrować ją z Angularem (co na razie wydaje się zbyt dużym zadaniem)?

Jeśli nie ma żadnego z powyższych, do jakich innych ram należy przejść, aby z łatwością obsługiwać zarówno płótno, jak i inne funkcje, takie jak panele, menu, wykresy itp.?