半岛权威十大直营(官方)网站

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和 HTML5 Canvas程序中创建流程图，且极大地简化你的JavaScript / Canvas 程序。本文主要演示安排座次表。

此示例演示如何将“Person（人）”节点放到“Table（桌子）”节点上，您可以拖动人物名字移动至指定座位，当一个人被拖入到图表中后，此人不会再被分配座位。在图表之间拖动的人会自动从图表中删除。例如将Arya Stark拖至Head 1中的位置1，Arya Stark会显示在此座位上，并且MyGuests图表已经自动删除Arya Stark。

“Table”节点由单独的模板定义，允许最大程度地定制桌椅的形状和大小和位置。

MyGuests图表中的“Person”节点也可以表示一组人，例如您的朋友带上他/她的朋友（不知道名字）或者一家人。将这样一组人放到桌子上时，会在myDiagram中创建其他节点。如果有空间，那些人就会坐在桌旁并坐在一起。

可以移动或旋转桌子。移动或旋转桌子会自动重新定位坐在该桌子上的人。

在两个Diagrams之间共享，因此可以在任一图表中撤消/重做，并让它自动处理图表之间的拖动，以及图表中的更改。

在页面中查看此示例页面的部分源代码，。

function init() {
    if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
    var $ = go.GraphObject.make;

    // Initialize the main Diagram
    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          allowDragOut: true,  // to myGuests
          allowDrop: true,  // from myGuests
          allowClipboard: false,
          initialContentAlignment: go.Spot.Center,
          draggingTool: $(SpecialDraggingTool),
          rotatingTool: $(HorizontalTextRotatingTool),
          // For this sample, automatically show the state of the diagram's model on the page
          "ModelChanged": function(e) {
              if (e.isTransactionFinished) {
                document.getElementById("savedModel").textContent = myDiagram.model.toJson();
              }
            },
          "undoManager.isEnabled": true
        });

    myDiagram.nodeTemplateMap.add("",  // default template, for people
      $(go.Node, "Auto",
        { background: "transparent" },  // in front of all Tables
        // when selected is in foreground layer
        new go.Binding("layerName", "isSelected", function(s) { return s ? "Foreground" : ""; }).ofObject(),
        { locationSpot: go.Spot.Center },
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        new go.Binding("text", "key"),
        { // what to do when a drag-over or a drag-drop occurs on a Node representing a table
          mouseDragEnter: function(e, node, prev) {
            var dragCopy = node.diagram.toolManager.draggingTool.copiedParts;  // could be copied from palette
            highlightSeats(node, dragCopy ? dragCopy : node.diagram.selection, true);
          },
          mouseDragLeave: function(e, node, next) {
            var dragCopy = node.diagram.toolManager.draggingTool.copiedParts;
            highlightSeats(node, dragCopy ? dragCopy : node.diagram.selection, false);
          },
          mouseDrop: function(e, node) { assignPeopleToSeats(node, node.diagram.selection, e.documentPoint); }
        },
        $(go.Shape, "Rectangle", { fill: "blanchedalmond", stroke: null }),
        $(go.Panel, "Viewbox",
          { desiredSize: new go.Size(50, 38) },
          $(go.TextBlock,{ margin: 2, desiredSize: new go.Size(55, NaN), font: "8pt Verdana, sans-serif", textAlign: "center", stroke: "darkblue" },
            new go.Binding("text", "", function(data) {
                var s = data.key;
                if (data.plus) s += " +" + data.plus.toString();
                return s;
              }))
        )
      ));

    // Create a seat element at a particular alignment relative to the table.
    function Seat(number, align, focus) {
      if (typeof align === 'string') align = go.Spot.parse(align);
      if (!align || !align.isSpot()) align = go.Spot.Right;
      if (typeof focus === 'string') focus = go.Spot.parse(focus);
      if (!focus || !focus.isSpot()) focus = align.opposite();
      return $(go.Panel, "Spot",
               { name: number.toString(), alignment: align, alignmentFocus: focus },
               $(go.Shape, "Circle",
                 { name: "SEATSHAPE", desiredSize: new go.Size(40, 40), fill: "burlywood", stroke: "white", strokeWidth: 2 },
                 new go.Binding("fill")),
               $(go.TextBlock, number.toString(),
                 { font: "10pt Verdana, sans-serif" },
                 new go.Binding("angle", "angle", function(n) { return -n; }))
             );
    }

    function tableStyle() {
      return [
        { background: "transparent" },
        { layerName: "Background" },  // behind all Persons
        { locationSpot: go.Spot.Center, locationObjectName: "TABLESHAPE" },
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        { rotatable: true },
        new go.Binding("angle").makeTwoWay(),
        { // what to do when a drag-over or a drag-drop occurs on a Node representing a table
          mouseDragEnter: function(e, node, prev) {
            var dragCopy = node.diagram.toolManager.draggingTool.copiedParts;  // could be copied from palette
            highlightSeats(node, dragCopy ? dragCopy : node.diagram.selection, true);
          },
          mouseDragLeave: function(e, node, next) {
            var dragCopy = node.diagram.toolManager.draggingTool.copiedParts;
            highlightSeats(node, dragCopy ? dragCopy : node.diagram.selection, false);
          },
          mouseDrop: function(e, node) { assignPeopleToSeats(node, node.diagram.selection, e.documentPoint); }
        }
      ];
    }

    // various kinds of tables:

    myDiagram.nodeTemplateMap.add("TableR8",  // rectangular with 8 seats
      $(go.Node, "Spot", tableStyle(),
        $(go.Panel, "Spot",
          $(go.Shape, "Rectangle",
            { name: "TABLESHAPE", desiredSize: new go.Size(160, 80), fill: "burlywood", stroke: null },
            new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
            new go.Binding("fill")),
          $(go.TextBlock, { editable: true, font: "bold 11pt Verdana, sans-serif" },
            new go.Binding("text", "name").makeTwoWay(),
            new go.Binding("angle", "angle", function(n) { return -n; }))
        ),
        Seat(1, "0.2 0", "0.5 1"),
        Seat(2, "0.5 0", "0.5 1"),
        Seat(3, "0.8 0", "0.5 1"),
        Seat(4, "1 0.5", "0 0.5"),
        Seat(5, "0.8 1", "0.5 0"),
        Seat(6, "0.5 1", "0.5 0"),
        Seat(7, "0.2 1", "0.5 0"),
        Seat(8, "0 0.5", "1 0.5")
      ));

    myDiagram.nodeTemplateMap.add("TableR3",  // rectangular with 3 seats in a line
      $(go.Node, "Spot", tableStyle(),
        $(go.Panel, "Spot",
          $(go.Shape, "Rectangle",
            { name: "TABLESHAPE", desiredSize: new go.Size(160, 60), fill: "burlywood", stroke: null },
            new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
            new go.Binding("fill")),
          $(go.TextBlock, { editable: true, font: "bold 11pt Verdana, sans-serif" },
            new go.Binding("text", "name").makeTwoWay(),
            new go.Binding("angle", "angle", function(n) { return -n; }))
        ),
        Seat(1, "0.2 0", "0.5 1"),
        Seat(2, "0.5 0", "0.5 1"),
        Seat(3, "0.8 0", "0.5 1")
      ));

想查看在线操作示例，。

想要购买GoJS正版授权，或者获取更多该产品相关信息的朋友可以点击" "~