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

點擊下載GoJS最新版

相關內容推薦

流程圖控件GoJS教程：內置GraphObject類各指數介紹(一)

流程圖控件GoJS教程：內置GraphObject類各指數介紹(二)

fromMaxLinks : number

獲取或設置此端口可能發出的最大鏈接數。LinkingBaseTool.isValidFrom使用此屬性。
該值必須為非負數。默認值為無窮大。

除非整個Node都充當單個端口，否則必須在portId不為null的GraphObject上設置此屬性，在這種情況下，應在Node上設置此屬性。

fromShortLength : number

獲取或設置來自該端口的鏈接的末段停止到實際端口的距離。正值受fromEndSegmentLength或Link.fromEndSegmentLength限制。負值會導致鏈接擴展到端口。默認值為零。

當您具有粗鏈接和尖的箭頭時，此屬性很有用。通常，鏈接Shape一直延伸到箭頭的末端。如果鏈接“形狀”較寬，則會在箭頭后面看到其邊緣。通過將此屬性設置為較小的正值，鏈接形狀可以在箭頭的主體內結束，而僅箭頭的點在鏈接的末端可見。

當您希望鏈接形狀繼續進入端口時，此屬性的負值也很有用，這可能是因為端口的一部分是透明的，并且您希望鏈接看起來與節點上的其他點在視覺上相連。

在確定鏈接的路由時，Link.fromShortLength的值（如果不是NaN）優先于此端口的值。

有關如何使用此屬性的示例，請參見鏈接連接點。

除非整個Node都充當單個端口，否則必須在portId不為null的GraphObject上設置此屬性，在這種情況下，應在Node上設置此屬性。

fromSpot : Spot

獲取或設置鏈接應從此端口連接的位置。默認值為Spot.None，這意味著鏈接路由必須考慮端口的形狀并在最近的點進行連接。

值Link.fromSpot，如果不是Spot.Default，判斷鏈接的路線時，在該端口的優先級高于該值。許多預定義的Layout會自動設置Link.fromSpot和Link.toSpot，從而導致端口元素上的此屬性和toSpot被忽略。根據布局，您可能能夠禁用該行為，例如通過將ForceDirectedLayout.setsPortSpots， TreeLayout.setsPortSpot，TreeLayout.setsChildPortSpot或LayeredDigraphLayout.setsPortSpots設置為false。

有關如何使用此屬性的示例，請參見鏈接連接點。

除非整個Node都充當單個端口，否則必須在portId不為null的GraphObject上設置此屬性，在這種情況下，應在Node上設置此屬性。

height : number

獲取或設置此GraphObject在本地坐標中的所需高度。這只是獲取或設置了所需Size的高度分量。默認值為NaN。

大小也可以通過設置minSize和maxSize來約束。

高度不包括由于比例或角度引起的任何變換，也不包括由于Shape.strokeWidth而引起的筆粗（如果為Shape）。如果有一個包含面板的面板，面板將確定實際尺寸。

isActionable : boolean

此屬性確定此GraphObject的事件是否在所有其他事件（包括選擇）之前發生。這將啟用actionDown， actionMove，actionUp和actionCancel事件，這些事件均由ActionTool處理。

如果該對象不可見 或無法拾取，則不會獲得任何鼠標/觸摸事件。

該屬性很少使用-通常僅在實現用作按鈕，旋鈕或滑塊的對象時才使用。默認值為false。

Panel Main ：布爾值

獲取或設置GraphObject是否為某些Panel類型的“主要”對象。使用“主”對象的面板包括Panel.Auto，Panel.Spot和Panel.Link。

使用“主”對象的面板將使用第一個將其屬性設置為true的對象，否則將僅使用第一個對象（如果沒有設置該屬性）。

一旦該對象是面板的元素，請勿修改此屬性。

Read-only layer : Layer | null

此只讀屬性返回GraphObject包含的Layer（如果存在）。普通的GraphObject不能直接屬于圖層-只有零件可以直接屬于圖層。

此屬性不可設置。通常，通過設置Part.layerName可以更改GraphObject所在的圖層。將零件添加到關系圖將基于layerName自動將該零件添加到該關系圖中的圖層。

margin ：MarginLike

獲取或設置此GraphObject周圍空白區域的大小（以Margin形式），包含在其Panel坐標中。

允許使用負值，但可能會導致與Panel中的相鄰對象重疊。您無法修改此屬性值的頂部，左側，右側或底部-如果要更改邊距，則必須將此屬性設置為其他邊距。默認邊距為Margin（0,0,0,0）。

屬性設置器接受數字而不是Margin對象：提供數字N將導致使用Margin（N，N，N，N）。屬性獲取器將始終返回保證金。

maxSize : Size

獲取或設置此GraphObject在容器坐標（Panel或文檔）中的最大大小。任何新值都必須是Size類型；NaN值視為無窮大。如果不需要最大寬度或高度，請使用NaN或Infinity。

您不能修改此屬性值的寬度或高度-如果要更改maxSize，必須將此屬性設置為其他Size。默認值為“無窮大乘無窮大”。包含面板的面板將確定該對象的實際大小。

Read-only measuredBounds : Rect

此只讀屬性以容器坐標（Panel或文檔）返回GraphObject的measuredBounds 。這描述了已排除邊界的轉換邊界。

您不得修改Rect的任何屬性，即此屬性的值。

與所有只讀屬性一樣，使用此屬性作為綁定源不太可能有用。

minSize : Size

獲取或設置此GraphObject在容器坐標（Panel或文檔）中的最小大小。任何新值都必須是Size類型；NaN值視為0。

您不能修改此屬性值的寬度或高度-如果要更改minSize，必須將此屬性設置為其他Size。默認值為零乘零。包含面板的面板將確定該對象的實際大小。

mouseDragEnter : function(e: InputEvent, thisObj: GraphObject, prevObj: GraphObject): void | null

獲取或設置在DraggingTool拖動期間用戶將鼠標移到該固定對象中時執行的函數；這使您可以根據拖動的位置在拖動過程中提供反饋。

如果此屬性值是一個函數，則使用InputEvent，此GraphObject和任何先前的GraphObject進行調用。該InputEvent.targetObject規定，在鼠標點仰視的可視化樹之前發現GraphObject GraphObject.panel s到獲得此對象。默認情況下，此屬性為null。

請注意，對于源自不同圖的拖放，目標圖的選擇集合將不是要拖動的部分。相反，可以在源圖的DraggingTool.copiedParts中找到要拖動的臨時零件。

該函數用Diagram.skipsUndoManager調用 temporarily set to true, so that any changes to GraphObjects are not recorded in the UndoManager. You do not need to start and commit any transaction in this function, because the DraggingTool will be conducting one already. After calling this function the diagram will be updated immediately.

有關mouseDragEnter事件處理程序的示例，請參見組織結構圖編輯器樣本中的節點模板 。

mouseDragLeave : function(e: InputEvent, thisObj: GraphObject, nextObj: GraphObject): void | null

獲取或設置在DraggingTool拖動期間用戶將鼠標移出該固定對象時執行的函數；這使您可以根據拖動的位置在拖動過程中提供反饋。

如果此屬性值是一個函數，則使用InputEvent，此GraphObject以及鼠標所在的任何新GraphObject進行調用。InputEvent.targetObject提供在查找GraphObject的可視樹之前在鼠標點找到的GraphObject。 .panel到達此對象。默認情況下，此屬性為null。

請注意，對于源自不同圖的拖放，目標圖的選擇集合將不是要拖動的部分。相反，可以在源圖的DraggingTool.copiedParts中找到要拖動的臨時零件。

將此函數與Diagram.skipsUndoManager臨時設置為true一起調用，這樣對GraphObject的任何更改都不會記錄在UndoManager中。您無需在該函數中啟動和提交任何事務，因為DraggingTool將已經在執行一個事務。調用此函數后，該圖將立即更新。

有關mouseDragLeave事件處理程序的示例，請參見組織結構圖編輯器樣本中的節點模板 。

mouseDrop : function(e: InputEvent, thisObj: GraphObject): void | null

獲取或設置函數，當用戶在DraggingTool拖動結束時將選擇放在該對象上時執行該函數；這使您可以自定義對象上掉落時的行為。

如果此屬性值是一個函數，則使用InputEvent（此GraphObject）調用它。該InputEvent.targetObject規定，在鼠標點仰視的可視化樹之前發現GraphObject GraphObject.panel s到獲得此對象。該函數在DraggingTool執行的事務中被調用，因此您不需要執行一個。默認情況下，此屬性為null。

有關mouseDrop事件處理程序的示例，請參見組織結構圖編輯器樣本中的節點模板 。

mouseEnter : function(e: InputEvent, thisObj: GraphObject, prevObj: GraphObject): void | null

獲取或設置當用戶將鼠標移到該對象而不按住任何按鈕時要執行的函數。此屬性由ToolManager使用。

如果此屬性值是一個函數，則使用InputEvent，鼠標現在所在的此GraphObject以及鼠標所在的任何先前的GraphObject進行調用。InputEvent.targetObject提供在查找之前在鼠標點找到的GraphObject繪制GraphObject.panel的可視樹以到達該對象。默認情況下，此屬性為null。

將此函數與Diagram.skipsUndoManager臨時設置為true一起調用，這樣對GraphObject的任何更改都不會記錄在UndoManager中。您無需在此函數中啟動和提交任何事務。調用此函數后，該圖將立即更新。

例如，考慮一種情況，當用戶將鼠標移到某個節點上時，希望顯示用戶可以單擊的按鈕，而當鼠標離開該節點時，這些按鈕會自動消失。這可以通過顯示裝飾物按住按鈕來實現。

var nodeContextMenu =
  $(go.Adornment, "Spot",
    { background: "transparent" },  // to help detect when the mouse leaves the area
    $(go.Placeholder),
    $(go.Panel, "Vertical",
      { alignment: go.Spot.Right, alignmentFocus: go.Spot.Left },
      $("Button",
        $(go.TextBlock, "Command 1"),
        {
          click: function(e, obj) {
            var node = obj.part.adornedPart;
            alert("Command 1 on " + node.data.text);
            node.removeAdornment("ContextMenuOver");
          }
        }),
      $("Button",
        $(go.TextBlock, "Command 2"),
        {
          click: function(e, obj) {
            var node = obj.part.adornedPart;
            alert("Command 2 on " + node.data.text);
            node.removeAdornment("ContextMenuOver");
          }
        })
      ));

myDiagram.nodeTemplate =
  $(go.Node,
    . . .
    {
      mouseEnter: function(e, node) {
        nodeContextMenu.adornedObject = node;
        nodeContextMenu.mouseLeave = function(ev, cm) {
          node.removeAdornment("ContextMenuOver");
        }
        node.addAdornment("ContextMenuOver", nodeContextMenu);
      }
    });