GoJS是一款功能強(qiáng)大，快速且輕量級(jí)的流程圖控件，可幫助你在JavaScript 和 HTML5 Canvas程序中創(chuàng)建流程圖，且極大地簡(jiǎn)化你的JavaScript / Canvas 程序。本文主要演示安排座次表。

此示例演示如何將“Person（人）”節(jié)點(diǎn)放到“Table（桌子）”節(jié)點(diǎn)上，您可以拖動(dòng)人物名字移動(dòng)至指定座位，當(dāng)一個(gè)人被拖入到圖表中后，此人不會(huì)再被分配座位。在圖表之間拖動(dòng)的人會(huì)自動(dòng)從圖表中刪除。例如將Arya Stark拖至Head 1中的位置1，Arya Stark會(huì)顯示在此座位上，并且MyGuests圖表已經(jīng)自動(dòng)刪除Arya Stark。

“Table”節(jié)點(diǎn)由單獨(dú)的模板定義，允許最大程度地定制桌椅的形狀和大小和位置。

MyGuests圖表中的“Person”節(jié)點(diǎn)也可以表示一組人，例如您的朋友帶上他/她的朋友（不知道名字）或者一家人。將這樣一組人放到桌子上時(shí)，會(huì)在myDiagram中創(chuàng)建其他節(jié)點(diǎn)。如果有空間，那些人就會(huì)坐在桌旁并坐在一起。

可以移動(dòng)或旋轉(zhuǎn)桌子。移動(dòng)或旋轉(zhuǎn)桌子會(huì)自動(dòng)重新定位坐在該桌子上的人。

在兩個(gè)Diagrams之間共享，因此可以在任一圖表中撤消/重做，并讓它自動(dòng)處理圖表之間的拖動(dòng)，以及圖表中的更改。

在頁面中查看此示例頁面的部分源代碼，。

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正版授權(quán)，或者獲取更多該產(chǎn)品相關(guān)信息的朋友可以點(diǎn)擊" "~