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

點(diǎn)擊下載GoJS最新試用版

用戶(hù)權(quán)限

以編程方式，您可以做什么沒(méi)有任何限制。但是，您可能希望限制用戶(hù)可以執(zhí)行的操作。

最簡(jiǎn)單的限制是將Diagram.isEnabled設(shè)置為false。用戶(hù)將無(wú)能為力。在此示例中，即使啟用了分組，撤消和重做命令，由于禁用了圖，因此這些命令無(wú)法執(zhí)行。

  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!

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

  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設(shè)置為true。這使用戶(hù)可以滾動(dòng)，縮放，選擇和移動(dòng)零件，但不能插入或刪除零件，包括不添加或刪除鏈接或添加或刪除組成員。

該Diagram.isModelReadOnly屬性只是獲取和設(shè)置Model.isReadOnly財(cái)產(chǎn)。如果要加載新模型，則需要在設(shè)置Diagram.model之后設(shè)置這個(gè)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

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

想要購(gòu)買(mǎi)GoJS正版授權(quán)的朋友可以

有關(guān)產(chǎn)品的最新消息和最新資訊，歡迎掃描關(guān)注下方微信公眾號(hào)