如何通過拖拽GOjs來增加節點大小？

Question

我正在使用GOjs創建節點並將它們彼此連接，就像流程圖一樣。 我有兩個div。在第一個div（id =「NodesContainer」）我創建go.Palette並使用第二個div的id（id =「myDiagram」）我正在設計調用Init（）方法的JavaScript節點。你可以在代碼塊中看到。 我只想要的是，當我將節點拖入第二個div時，節點應該變得更大。 如果你知道答案，請幫助我。

 //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) 
    )); 
} 

//結束初始化的（） enter image description here

Answer 1

的容易的事是將Palette.initialScale設定爲比1.0小的值。這樣，調色板中的項目看起來比在主圖表中放置之後的節點要小。

另一種真正改變大小（以文件座標）是實施「ExternalObjectsDropped」 DiagramEvent聽衆不是通過e.subject，這將是一個集GoJS運行，實際修改每個節點的大小。