GoJS是一款功能強大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創建流程圖，且極大地簡化您的JavaScript / Canvas 程序。

點擊下載GoJS最新試用版

用戶權限

以編程方式，您可以做什么沒有任何限制。但是，您可能希望限制用戶可以執行的操作。

最簡單的限制是將Diagram.isEnabled設置為false。用戶將無能為力。在此示例中，即使啟用了分組，撤消和重做命令，由于禁用了圖，因此這些命令無法執行。

  diagram.commandHandler.archetypeGroupData =
    { key: "Group", isGroup: true, color: "blue" };

  var nodeDataArray = [
    { key: "Alpha" },
    { key: "Beta" },
    { key: "Delta", group: "Epsilon" },
    { key: "Gamma", group: "Epsilon" },
    { key: "Epsilon", isGroup: true }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" },
    { from: "Beta", to: "Beta" },
    { from: "Gamma", to: "Delta" },
    { from: "Delta", to: "Alpha" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
  diagram.undoManager.isEnabled = true;

  diagram.add($(go.Part,  // this is just a visual comment
                { location: new go.Point(200, 50) },
                $(go.TextBlock, "Diagram.isEnabled == false",
                  { font: "16pt bold", stroke: "red" })
              ));

  diagram.isEnabled = false;  // Disable the diagram!

更常見的是將Diagram.isReadOnly設置為true。這使用戶可以滾動和縮放以及選擇零件，但不能插入或刪除或拖動或修改零件。（如果要允許滾動和縮放而不是選擇，則可以禁用選擇，如下所述。）

  diagram.commandHandler.archetypeGroupData =
    { key: "Group", isGroup: true, color: "blue" };

  var nodeDataArray = [
    { key: "Alpha" },
    { key: "Beta" },
    { key: "Delta", group: "Epsilon" },
    { key: "Gamma", group: "Epsilon" },
    { key: "Epsilon", isGroup: true }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" },
    { from: "Beta", to: "Beta" },
    { from: "Gamma", to: "Delta" },
    { from: "Delta", to: "Alpha" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
  diagram.undoManager.isEnabled = true;

  diagram.add($(go.Part,  // this is just a visual comment
                { location: new go.Point(200, 50) },
                $(go.TextBlock, "Diagram.isReadOnly == true",
                  { font: "16pt bold", stroke: "red" })
              ));

  // Disable diagram modifications, but allow navigation and selection
  diagram.isReadOnly = true;

另一種可能性是將Model.isReadOnly設置為true。這使用戶可以滾動，縮放，選擇和移動零件，但不能插入或刪除零件，包括不添加或刪除鏈接或添加或刪除組成員。

該Diagram.isModelReadOnly屬性只是獲取和設置Model.isReadOnly財產。如果要加載新模型，則需要在設置Diagram.model之后設置這個Diagram屬性。

  diagram.commandHandler.archetypeGroupData =
    { key: "Group", isGroup: true, color: "blue" };

  var nodeDataArray = [
    { key: "Alpha" },
    { key: "Beta" },
    { key: "Delta", group: "Epsilon" },
    { key: "Gamma", group: "Epsilon" },
    { key: "Epsilon", isGroup: true }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" },
    { from: "Beta", to: "Beta" },
    { from: "Gamma", to: "Delta" },
    { from: "Delta", to: "Alpha" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
  diagram.undoManager.isEnabled = true;

  diagram.add($(go.Part,  // this is just a visual comment
                { location: new go.Point(200, 50) },
                $(go.TextBlock, "Diagram.model.isReadOnly == true",
                  { font: "16pt bold", stroke: "red" })
              ));

  diagram.model.isReadOnly = true;  // Disable adding or removing parts

====================================================

想要購買GoJS正版授權的朋友可以

有關產品的最新消息和最新資訊，歡迎掃描關注下方微信公眾號