Comment puis-je augmenter la taille d'un nœud en le faisant glisser dans GOJs?

Question

J'utilise GOJs pour créer des nœuds et les connecter les uns aux autres comme un organigramme. J'ai deux div. Dans le premier div (id = "NodesContainer") je crée go.Palette et en utilisant l'id de la seconde div (id = "myDiagram") je suis en train de concevoir les nœuds sur l'appel de la méthode Init() en javascript. Vous pouvez voir dans le bloc de code. Tout ce que je veux, c'est que lorsque je fais glisser les nœuds dans le second div, les nœuds devraient devenir plus gros. S'il vous plaît aidez-moi si vous connaissez la réponse.

 //initialize the Palette that is on the top side of the page 
    NodesContainer = 
    $(go.Palette, "NodesContainer", // must name or refer to the DIV HTML element 
    { 
     //"animationManager.duration": 800, // slightly longer than default (600ms) animation 
     nodeTemplateMap: myDiagram.nodeTemplateMap, // share the templates used by myDiagram 
     model: new go.GraphLinksModel([ // specify the contents of the Palette 
      { category: "START", img: "../../Content/images/Start_Node.png" }, 
      { category: "END", img: "../../Content/images/End_Node.png" }, 
      { category: "ConnectorIn", img: "../../Content/images/Connector_In_Node.png" }, 
      { category: "ConnectorOut", img: "../../Content/images/Connector_Out_Node.png" }, 
      { category: "Comment", img: "../../Content/images/Comment_Node.png" }, 
      { category: "DECISION", img: "../../Content/images/Decision_Node.png" }, 
      { category: "Execution", img: "../../Content/images/Custom_Execution_Node.png" } 

     ]) 
    }); 
    //end of Initialize the Palette that is on the top side of the page 


    function initNodes() { 
    var vargojsshapetextsize = []; 
    if (window.goSamples) goSamples(); 
    function nodeStyle() { 
     return [ 
      // The Node.location comes from the "loc" property of the node data, 
      // converted by the Point.parse static method. 
      // If the Node.location is changed, it updates the "loc" property of the node data, 
      // converting back using the Point.stringify static method. 
      new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify), 
      { 
       // the Node.location is at the center of each node 
       locationSpot: go.Spot.Center, 
       //isShadowed: true, 
       //shadowColor: "#888", 
       // handle mouse enter/leave events to show/hide the ports 
       mouseEnter: function (e, obj) { showPorts(obj.part, true); }, 
       mouseLeave: function (e, obj) { showPorts(obj.part, false); } 
      } 
     ]; 
    } 
    // Define a function for creating a "port" that is normally transparent. 
    function makePort(name, spot, output, input) { 
     // the port is basically just a small circle that has a white stroke when it is made visible 
     return $(go.Shape, "Circle", 
       { 
        fill: "transparent", 
        stroke: null, // this is changed to "white" in the showPorts function 
        desiredSize: new go.Size(8, 8), 
        alignment: spot, 
        alignmentFocus: spot, // align the port on the main Shape 
        portId: name, // declare this object to be a "port" 
        fromSpot: spot, 
        toSpot: spot, // declare where links may connect at this port 
        fromLinkable: output, 
        toLinkable: input, // declare whether the user may draw links to/from here 
        fromLinkableDuplicates: true, 
        toLinkableDuplicates: true, 
        fromMaxLinks: 1, 
        toMaxLinks: 1,// declare whether the user may draw links to/from here 
        cursor: "pointer" // show a different cursor to indicate potential link point 
       }); 
    } 

    // Make link labels visible if coming out of a "conditional" node. 
    // This listener is called by the "LinkDrawn" and "LinkRelinked" DiagramEvents. 
    function showLinkLabel(e) { 
     var label = e.subject.findObject("LABEL"); 
     if (label !== null) 
      label.visible = (e.subject.fromNode.data.figure === "Diamond"); 
    } 



    var $ = go.GraphObject.make; // for conciseness in defining templates 

    myDiagram = $(go.Diagram, "myDiagram", // must name or refer to the DIV HTML element 
    { 
     initialContentAlignment: go.Spot.TopCenter, 
     allowDrop: true, // must be true to accept drops from the Palette 
     initialContentAlignment: go.Spot.Center, //For Allignment 
     "undoManager.isEnabled": true, 
     //allowResize:true, 
     "LinkDrawn": showLinkLabel, // this DiagramEvent listener is defined below 
     "LinkRelinked": showLinkLabel, 
     "animationManager.duration": 1200, // slightly longer than default (600ms) animation 
     "undoManager.isEnabled": true // enable undo & redo 
    }); 

    // define the Node templates for regular nodes 
    var lightText = 'whitesmoke'; 

    myDiagram.nodeTemplateMap.add("START", 
     $(go.Node, "Spot", nodeStyle(), 
     $(go.Panel, "Auto", 
      $(go.Picture, 
      { 
       maxSize: new go.Size(30, 30) 
      }, 
      new go.Binding("source", "img")) 
     ), 
     // One named port, at the bottom side, all output only: 
     makePort("B", go.Spot.Bottom, true, false) 
    )); 

    myDiagram.nodeTemplateMap.add("END", 
     $(go.Node, "Spot", nodeStyle(), 
     $(go.Panel, "Auto", 
      $(go.Picture, 
      { 
       maxSize: new go.Size(30, 30) 
      }, 
      new go.Binding("source", "img")) 
     ), 
     // three named ports, one on each side except the bottom, all input only: 
     makePort("T", go.Spot.Top, false, true), 
     makePort("L", go.Spot.Left, false, true), 
     makePort("R", go.Spot.Right, false, true) 
    )); 
    myDiagram.nodeTemplateMap.add("Execution", 
     $(go.Node, "Spot", nodeStyle(), 
     // the main object is a Panel that surrounds a TextBlock with a rectangular Shape 
     $(go.Panel, "Auto", 
      $(go.Picture, 
      { 
       maxSize: new go.Size(30, 30) 
      }, 
      new go.Binding("source", "img")) 
     ), 
     // four named ports, one on each side: 
     makePort("T", go.Spot.Top, false, true), 
     makePort("L", go.Spot.Left, true, true), 
     makePort("R", go.Spot.Right, true, true), 
     makePort("B", go.Spot.Bottom, true, false) 
    )); 
} 

// Fin de Init() enter image description here

Answer 1

La chose facile à faire est de mettre la Palette.initialScale à une valeur inférieure à 1,0. De cette façon, les éléments de la palette semblent plus petits que les nœuds après avoir été supprimés dans le diagramme principal.

Une alternative pour vraiment changer la taille (dans le document coordonne) est de mettre en œuvre un « ExternalObjectsDropped » DiagramEvent auditeur que traverse la e.subject, qui sera une collection GoJS, de modifier réellement la taille de chaque nœud.