logo GoJS教程2020 我也要发布文档

流程图控件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!

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

更常见的是将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正版授权的朋友可以咨询慧都官方客服

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