如何在GOjs中拖动时增加节点大小？

Question

我正在使用GOjs创建节点并将它们彼此连接，就像流程图一样。 我有两个分区。 在第一个div（id =“ NodesContainer”）中，我将创建go.Palette，并使用第二个div（id =“ myDiagram”）的ID，以在javascript中调用Init（）方法时设计节点。 您可以在代码块中看到。 我想要的是，当我将节点拖到第二个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)
      ));
}

// Init（）的结尾在此处输入图像描述

Answer 1

容易做到的是将Palette.initialScale设置为小于1.0的值。 这样，调色板中的项目在放入主图中后看起来会比节点小。

真正更改大小（在文档坐标中）的另一种方法是实现一个“ ExternalObjectsDropped” DiagramEvent侦听e.subject ，然后通过e.subject （将是GoJS集合）运行它，以实际修改每个Node的大小。