流程图控件GoJS教程：用户权限

---

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正版授权的朋友可以

有关产品的最新消息和最新资讯，欢迎扫描关注下方微信公众号