MIYAKO SVG Area.4dbase refactoring

Hi,
hi Miyako ? I’m refactoring this svg editor, which works quite well.
But has somebody added the functionality to add the path svg objects ? I know this is not that easy, because of all the options for drawing, and to compile and decompile the path syntax.
This example is not totally finished and I need them :slight_smile:

Under construction…

Un peu HS, mais celui-ci est assez bluffant, il édite les courbes de Bézier.

Ah yes, on line there are plenty!
I’m looking as a 4D database example.

J’avais fais une implémentation de svg-edit qui est encore pleinement opérationnelle mais mériterait une mise à jour avec la dernière version de la librairie.

Ah oui, intéressant, j’avoue que le module est chouette. Et intégré à 4D. Je vais voir si j’ai le courage de le faire en 4D natif ou pas. Pour l’instant, j’améliore l’interface de celui de Miyako.

Vous avez aussi un éditeur tout prêt dans la base 4D Labels. D’autant que l’outil dessin à main levée y est codé mais n’a pas été activé pour les étiquettes.

Ah oui, sympa, main levée et plein de truc cool à voir. Mais toujours pas de path avec les courbes beziers, mais je vais regarder dans le code. Merci !

dans le code, l’outil main levée n’est activé, si les souvenirs sont bon, que quand on exécute le dialogue depuis la base matrice en interprété. Il y a un test, qu’il suffit de désactiver pour l’avoir en compilé. Mais pas de courbe de Béziers.

Ah d’accord, je ferai attention. Pour les paths et beziers, ça représente un gros boulot, pour avoir déjà fait le decompilateur (valeurs par défaut, sous entendues etc). Plus l’interface… À suivre !

Bonsoir Vincent,
c’est pas mal du tout en fait. J’ai donc travaillé dessus, surtout pour en faire un widget en composant.
Puis j’ai essayé de passer de la version 2.4 à la dernière 5.1.0. Et cela marche dans la zone web, par contre toutes les commandes comme

$0:=WA Evaluate JavaScript(*;<>k_webArea;"svgCanvas.getVersion();")

ne font rien, et rende par exemple $0:=""

J’ai l’impression que la librairie “svgcanvas.min.js” n’est pas chargée, et je n’arrive pas à la mettre.
Idem pour le set et get du svg.

Si tu as une idée… Merci !

Ce code a été écrit en v11… depuis, de l’eau a coulé sous les ponts comme on dit, et entre autre le moteur de la webArea a changé. Plutôt que WA Evaluate JavaScript, j’utiliserai maintenant WA EXECUTE JAVASCRIPT FUNCTION quitte à ajouter tes fonctions dans un fichier propre au composant (c’est la technique utilisée pour le composant 4D ViewPro).

1 Like

Merci, je fais des tests avec cela.
Je vais remplacer

Ensuite, je comprends pour le fichier propre car c’est ce que j’ai fait avec TinyMCE pour avoir un éditeur d’email html.
Je publierai sûrement un composant libre quand j’aurai un éditeur qui marche.

Salut !
Je fais un compte rendu de la solution qui fonctionne.

Je suis parti de l’exemple de VDL et svg-edit. Ca marche mais avec une vieille version de svg-edit (la 2.4). J’ai essayé de migrer vers la 5.1.0, sans succès : plein d’erreur CORS liées aux sécurités de plus en plus fortes apportées sur les dernières versions.

Je ne voulais pas rester sur la 2.4 car elle est vieille et comporte des bugs qui arrivent même à générer du svg qui fait des erreurs dans 4D !

N’arrivant pas à migrer, j’ai fait un truc tout simple. J’ai appelé la version en ligne de framasoft !
Ici : https://framavectoriel.org/svg-editor.html

Donc dans la méthode _svgEdit_init, j’ai changé sur plusieurs url, dont celle en ligne. Et cette dernière fonctionne.

$editor_type:=2
Case of 
	: ($editor_type=0)
		$kTxt_librayFolder:="svg-edit-2.4" // OK !
		$Txt_path:=Get 4D folder(Current resources folder)+$kTxt_librayFolder+Folder separator+"svg-editor.html"
		
	: ($editor_type=1)
		$kTxt_librayFolder:="svgedit-5.1.0"+Folder separator+"editor" // NOK !
		$Txt_path:=Get 4D folder(Current resources folder)+$kTxt_librayFolder+Folder separator+"svg-editor.html"
		
	: ($editor_type=2)
		$Txt_path:="https://framavectoriel.org/svg-editor.html" // OK !!
		
End case

Et toutes les actions sur la zone fonctionnent, donc on peut utiliser le getter et setter du svg, etc.

svgEdit_getSvgString
svgEdit_setSvgString

Voilà, j’en ai fait un composant qui contient le peu de méthodes requises pour que cela fonctionne. Bon, on doit être sur internet pour que cela marche, mais c’est simple à utiliser.

Si d’aucun veulent le composant, je vais le mettre sur mon site d’ici demain.

1 Like

I found this amazing editor, which seems to be a fork, as based on svgCanvas too.
https://editor.method.ac/

I’ll integrate it to the component.

Yes !
Integrated with an offline version. I will publish the component available.

Here it is !
https://www.protee.org/index.php/en/download-en/4d-free-bonus/93-svgmethoddraw-svg-edit-v18r2
Compiled component is inside the source project.


  // Basics

$version:=svgEdit_getVersion ({$formName})  // Get version

svgEdit_setEditor ({$editor_type};{$formName})  // Editor version ; use 0 or none

svgEdit_new ({$formName})  // Clear editor

$isModified:=svgEdit_isModified ({$formName}) // DO NOT WORK FOR NOW

svgEdit_setEnabled ($is_enabled;{$formName})  // editor enabled or not

svgEdit_resize ($border;{$formName})  // set border and recalculate the widget content based on size
// $border = -1 => no border change


// SVG getter and setter

$svg_txt:=svgEdit_getSvgString ({$formName})  // get svg from editor

$isOk:=svgEdit_setSvgString ($svg_txt;{$formName})  // set svg to editor


  // Picture manipulation
$svg_txt:=svgEdit_pictureToSvg ($picture)  // picture to svg text
// If no svg dom found, will create an svg dom based on the bitmap

$picture:=svgEdit_svgToPicture ($svg_txt)  // svg text to a picture
// The svg is cleaned with svgEdit_domPicture_clean too

// Utilitary

svgEdit_domPicture_clean ($svg_dom)  // Clean up the svg given by the editor
// remove all attributes "Null" and "undiefined" -> make errors with 4D's svg parser 

Nice. Thanks for sharing that Olivier.

You’re most welcome, Peter.
And I’m specially happy to get some feedback like you :slight_smile:

I see you’re in New Zealand? I’m going to Australia soon, working for a company in 4D…
Hope we will meet when I’ll travel to your island!

2020-0703 V1.1 - added a form to edit with a method call, and an svg colors modifiers method.

$isOk:=svgEdit_edit_form($ptr_picture;{$form_type:palette};{$is_editable:true})

svgEdit_domPicture_colors($svg_dom;$color_stroke_txt;$color_fill_txt)  // Changes stroke and fill attributes
  // Change only not "none" values in destination,
  // and only for not "none" values for $color_stroke_txt & $color_fill_txt

Hi Olivier. Excellent news. Where will you be in Oz? I have an office in Melbourne and get over their regularly. It would be great to catch up some time.