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

點擊下載GoJS最新版

相關(guān)內(nèi)容推薦

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

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

fromMaxLinks : number

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

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

fromShortLength : number

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

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

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

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

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

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

fromSpot : Spot

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

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

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

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

height : number

獲取或設(shè)置此GraphObject在本地坐標(biāo)中的所需高度。這只是獲取或設(shè)置了所需Size的高度分量。默認(rèn)值為NaN。

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

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

isActionable : boolean

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

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

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

Panel Main ：布爾值

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

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

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

Read-only layer : Layer | null

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

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

margin ：MarginLike

獲取或設(shè)置此GraphObject周圍空白區(qū)域的大小（以Margin形式），包含在其Panel坐標(biāo)中。

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

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

maxSize : Size

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

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

Read-only measuredBounds : Rect

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

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

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

minSize : Size

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

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

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

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

如果此屬性值是一個函數(shù)，則使用InputEvent，此GraphObject和任何先前的GraphObject進行調(diào)用。該InputEvent.targetObject規(guī)定，在鼠標(biāo)點仰視的可視化樹之前發(fā)現(xiàn)GraphObject GraphObject.panel s到獲得此對象。默認(rèn)情況下，此屬性為null。

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

該函數(shù)用Diagram.skipsUndoManager調(diào)用 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.

有關(guān)mouseDragEnter事件處理程序的示例，請參見組織結(jié)構(gòu)圖編輯器樣本中的節(jié)點模板 。

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

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

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

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

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

有關(guān)mouseDragLeave事件處理程序的示例，請參見組織結(jié)構(gòu)圖編輯器樣本中的節(jié)點模板 。

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

獲取或設(shè)置函數(shù)，當(dāng)用戶在DraggingTool拖動結(jié)束時將選擇放在該對象上時執(zhí)行該函數(shù)；這使您可以自定義對象上掉落時的行為。

如果此屬性值是一個函數(shù)，則使用InputEvent（此GraphObject）調(diào)用它。該InputEvent.targetObject規(guī)定，在鼠標(biāo)點仰視的可視化樹之前發(fā)現(xiàn)GraphObject GraphObject.panel s到獲得此對象。該函數(shù)在DraggingTool執(zhí)行的事務(wù)中被調(diào)用，因此您不需要執(zhí)行一個。默認(rèn)情況下，此屬性為null。

有關(guān)mouseDrop事件處理程序的示例，請參見組織結(jié)構(gòu)圖編輯器樣本中的節(jié)點模板 。

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

獲取或設(shè)置當(dāng)用戶將鼠標(biāo)移到該對象而不按住任何按鈕時要執(zhí)行的函數(shù)。此屬性由ToolManager使用。

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

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

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

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);
      }
    });