Hook pour les containers dans le modeler

Tags: #<Tag:0x00007f4913bb8718>

Bonjour,

Existe-t-il un hook de type “onDrawContainer” pour le modeler ? J’essaie de changer la couleur des conteneurs mais je n’arrive pas à y accéder.

Merci !

Version=4.0.P24
BuiltOn=2020-09-08 14:02 (revision cc3e1c0a38d7b0549d655541696b9efd34201031)

Je vais laisser @francois répondre sur la question.

Par contre j’attire votre attention sur le fait que votre instance à plus de 3 mois et est en retard de plus de 150 commits sur la branche de maintenance 4.0 (donc essentiellement des correctifs). Il est donc à priori temps de vous mettre à jour.

J’ai testé onDrawContainer(c, display) à tout hasard et cela fonctionne
Désolée pour le dérangement !

Oui c’est ça, voici petit rappel des hooks du modeler :

/*
 * SIMPLICITE - runtime & framework
 * http://www.simplicite.fr
 * Copyright (c)2006-2020 Simplicite Software. All rights reserved.
 */

// SVG Modeler extension
Simplicite.Diagram.ModelHooks.Default = {

// Template global properties
canUseGrid: true,
canUseNote: true,
canUseShape: true,
canUseContainer: true,
canUseTitle: true,
canUseSprings: true,

//-----------------
// Model hooks
//-----------------
// Called when the template is loaded
onLoadTemplate: function(template, cbk) { cbk(); },
// Called when the model is loaded (before rendering)
onLoadModel: function(data, cbk) { cbk(); },
// Called before save
preSaveModel: function(item, cbk) { cbk(); },
// Called if the model has been saved
postSaveModel: function(item, cbk) { cbk(); },
// Called before closing
preCloseModel: function(cbk) { cbk(); },

//-----------------
// Element hooks
//-----------------

// Called when node is loaded from DB
onLoadNode: function(node, cbk) { cbk(); },
// Override node drawing (synchronous)
onDrawNode: function(node, display) { display(); },
// Override node item drawing (synchronous)
onDrawItem: function(node, data, display) { display(); },

// Called when link is loaded
onLoadLink: function(link, cbk) { cbk(); },
// Override link drawing (synchronous)
onDrawLink: function(link, display) { display(); },

//-----------------
// Desktop hooks
//-----------------

// When desktop is displayed with diagram
ready: function(desktop, cbk) { cbk(); },

// Override default diagram form (object Model on rowId)
onOpenModel: function(modelId, form) { form(); },
// Override default target form { object, id }
onOpenElement: function(target, form) { form(); },

// Prepare or Override default creation form (node or container)
onNewNode: function(nodeTemplate, container, position, form) { form(); },
// Prepare or Override default object selector (node or container) or call select(optional filters)
onInsertNode: function(nodeTemplate, position, container, select) { select(); },

// Called when node is added to desktop
onAddNode: function(node, cbk) { cbk(); },
// Called after node move
onMoveNode: function(node) {},
// Called after node remove from UI
onRemoveNode: function(node) {},
// Called after node deletion from DB
onDeleteNode: function(node) {},

// Override default content selector
onInsertContent: function(node, contentTemplate, select) { select(); },
// Override default content creation
onAddContent: function(node, contentTemplate, form) { form(); },

// Override default link creation
onCreateLink: function(fromNode, toNode, linkTemplate, create) { create(); },
// Called when link is added to desktop
onAddLink: function(link) {},
// Called after link remove from UI
onRemoveLink: function(link) {},
// Called after link deletion from DB
onDeleteLink: function(link) {},

// Called when container is loaded from DB
onLoadContainer: function(cont, cbk) { cbk(); },
// Called when container is added to desktop
onAddContainer: function(node, cbk) { cbk(); },
// Override container drawing (synchronous)
onDrawContainer: function(cont, display) { display(); },
// Called after container move
onMoveContainer: function(cont) {},
// Called after container remove from UI
onRemoveContainer: function(cont) {},

//-----------------
// Custom menu
//-----------------
customNodeMenu: function(node, item) {},
customLinkMenuAdd: function(from,to,pal) { return false; },

// Menu actions
canCreateNode: function(tplNode) { return true; },
canInsertNode: function(tplNode) { return true; },
canFetchNode:  function(tplNode) { return true; },
canRemoveNode: function(tplNode) { return true; },
canDeleteNode: function(tplNode) { return false; },
canCreateContent: function(tplContent) { return true; },
canInsertContent: function(tplContent) { return true; },
canAddLink: function(tplLink) { return true; },
canDeleteLink: function(tplLink) { return false; },
canRemoveContainer: function(tpl) { return true; }

};

Ah super merci, où puis-je trouver cette doc ? Dans celle ci il n’y a pas les infos pour les conteneurs https://docs.simplicite.io/documentation/01-core/modeler-code-hooks.md je crois que je ne regarde pas au bon endroit

Oui c’est la doc du modeleur legacy (utilisant des canvas) qui n’avait pas les mêmes fonctionnalités.
Mais du coup je ne trouve pas celle des diagrammes SVG…
on va mettre à jour les liens/docs.

1 Like

Le lien affiche maintenant la doc du modeleur SVG :

Le code est accessible dans les templates de modèle livrés avec la plateforme pour s’inspirer des design patterns (modèle objets, d’états, users, demo…).

Dans l’idée SVG est un DOM donc plus simple à manipuler qu’un Canvas (qui reste une feuille de dessin sans contenu pour le navigateur) :

  • On peut donc manipuler le SVG avec jQuery
  • En utilisant le constructeur Simplicite.Diagram.createElement pour créer dynamiquement des objets graphiques (g, text, img, path, rect, circle…) et qui retourne un objet jQuery dans le bon namespace ‘http://www.w3.org/2000/svg’ (et non pas HTML)
  • Les selectors fonctionnent bien pour retrouver des objets graphiques, ou ajouter des styles
  • Il faut aussi faire attention car le langage SVG est case sensitive, donc éviter le jQuery.attr qui force en minuscule les noms des attributs et préférer le bon vieux vanilla script elt.setAttribute("textLength", "10") pour les attributs avec majuscule.

On peut encore y ouvrir l’ancienne documentation pour les modèles de type Canvas, mais ça ne fonctionnera plus dans peu de temps.

1 Like