Bonjour à tous,

Dans le cadre de mon projet d'alternance j'ai été mis sur la refonte d'une fonctionnalité importante d'une application web d'édition de magazine.

Environnement technique : Sf3, JQuery, jquery-ui, ajax, js etc etc

Actuellement :

 Il y a une fonctionnalité qui permet de changer l'ordre des éléments sur la page (grâce à sortable() de jquery.

Ce que je veux : 

  J'aimerais modifier cette fonctionnalité pour avoir un éditeur tout en un ! Un peu comme sur canva ou élémentor pour ceux qui connaissent. J'aimerais pouvoir déplacer, redimensionner et rotate mes éléments sur la zone d'édition. Avec pourquoi pas implémenter un zoom pour les images et un changement de taille de police pour les textes.

Ce que je connais :

 Comme spécifié plus haut, il y a jquery sur mon projet, il y a donc les méthodes draggable, resizable, selectable etc etc, le problème est que je n'arrive pas à tout réaliser dans un ordre correct pour obtenir ce que je souhaite.

Si vous connaissez des plugs-in capable de tout gérer ensemble , ou un exemple de code qui pourrait réaliser ce que je dois faire etc je suis preneur !

Voici quelques images pour illustrer : 

Ce que j'aimerais (ex de canva): 

Ce à quoi ressemble le site que je dev :

Voila j'aimerais donc bien que lorsque je clique sur un élément il y ai les 4 coins de resize qui apparaissent, la possibilité de drag l'élément et rotate aussi , dans le même style que canva ou autre si vous connaissez.

Je peux fournir des exemples de code si besoin.

Merci d'avance,

Julien

-
Edité par LeUJ 28 avril 2021 à 12:58:57

Salut,

j'ai essayé un truc pour tourner, et ça marche bien. Par contre ça demande un peu de code pour faire un truc qui a l'air simple 

Donc je t'ai mis l'exemple là : https://codepen.io/Arthur222/pen/XWMNJpX

Tu cliques sur l'image, un point vert apparaît en haut à gauche. Tu cliques sur ce point vert et tu peux faire tourner l'image autour de son centre.

Les 2 trucs à savoir du code c'est :

- pour faire tourner, je prends les 2 points : le point vert, et le milieu de l'image, et je calcule avec Math.atan2. Ca va calculer automatiquement l'angle, et ça te donne le résultat en radians, il faut multiplier 180 / Math.PI pour avoir le résultat en degrés (le css veut des degrés)

- pour que l'image tourne avec mousemove sans que ça occupe trop de ressources (l'ordi commence à tourner 10 fois plus vite), on met le code dans une fonction "asynchrone", ça ouvre un "thread", un canal de travail, qui va faire le travail sans gêner le thread principal qui est celui de la page, avec les interactions souris etc.

Pour distribuer les éléments dans ta page, tu peux regarder du côté de "flex" avec css, et pour faire une transition, les animations css.

Mais il y avait un outil qui existe déjà pour du drag and drop d'élément html, je me souviens plus du nom mais en faisant une recherche google tu vas sûrement tomber dessus.

-> si tu veux un petit cours sur async/await et les Promises, tu peux regarder là (en anglais)

-
Edité par Arthur222 19 mai 2021 à 1:05:05

Merci de ta réponse, je vais regarder tout ça et je reviendrais ici si j'ai de nouvelles questions ! 

Julien