Members
(constant) CARET_PATH
- Description:
設定表單群組之 disclosure 三角形(viewBox 0 0 10 10, 預設朝右 = 收合; 展開時由 CSS 轉 90 度朝下)。 頂點與底邊取正三角形比例(底 6.4 / 高 5.54), 外接框中心恰為 (5,5) —— 旋轉不偏移。
- Source:
設定表單群組之 disclosure 三角形(viewBox 0 0 10 10, 預設朝右 = 收合; 展開時由 CSS 轉 90 度朝下)。 頂點與底邊取正三角形比例(底 6.4 / 高 5.54), 外接框中心恰為 (5,5) —— 旋轉不偏移。
(constant) CONN_SETTING_GROUPS
- Description:
連線設定分群(對應 ConnSettingsForm 之欄位; points 為轉折點區塊, 與路徑同群)。 appearance 之群鍵/標題與節點一致(成員依元素型別而異), 使兩個 popup 之語彙對稱。
- Source:
連線設定分群(對應 ConnSettingsForm 之欄位; points 為轉折點區塊, 與路徑同群)。 appearance 之群鍵/標題與節點一致(成員依元素型別而異), 使兩個 popup 之語彙對稱。
(constant) CONN_SETTING_KEYS
- Description:
連線設定更新入口受理之欄位(schema allowlist)
- Source:
連線設定更新入口受理之欄位(schema allowlist)
(constant) DEFAULT_OPEN_GROUPS
- Description:
預設展開之群(其餘收合): 取首群, 使 popup 一開即可改最常用欄位, 又不致全部攤開
- Source:
預設展開之群(其餘收合): 取首群, 使 popup 一開即可改最常用欄位, 又不致全部攤開
(constant) DRAG_THRESHOLD_PX
- Description:
拖曳啟動門檻(px): 畫布框選/平移、節點拖曳、label 位移判定共用
- Source:
拖曳啟動門檻(px): 畫布框選/平移、節點拖曳、label 位移判定共用
(constant) EDGE_TYPES
- Description:
支援之邊型值域(設定表單之 Type 下拉即由此衍生, 不另抄一份; 新增路徑函式時選項自動跟上)
- Source:
支援之邊型值域(設定表單之 Type 下拉即由此衍生, 不另抄一份; 新增路徑函式時選項自動跟上)
(constant) EDGE_WIDTH_MAX
- Description:
設定表單之線寬上限(節點外框/連線線寬共用)
- Source:
設定表單之線寬上限(節點外框/連線線寬共用)
(constant) FIELD_POLICY
- Description:
每欄位之有效值(item → defaults)回退政策(不同欄位之「空值」語義不同, 不用通用規則抹平): raw : 只取 item 自身(name/description 之空字串為有效值, 不繼承) defined : item 非 undefined/null 即採用(edgeWidth 0、animated false 皆為明確值) explicit-empty : item 非 undefined/null 即採用, 含 ''(markerFrom/End 之 '' 為明確「無」, 不落回 defaults——與 edgeMarker 同一規則) truthy(預設) : item 為 truthy 才採用, '' 視為未給 → defaults
- Source:
每欄位之有效值(item → defaults)回退政策(不同欄位之「空值」語義不同, 不用通用規則抹平): raw : 只取 item 自身(name/description 之空字串為有效值, 不繼承) defined : item 非 undefined/null 即採用(edgeWidth 0、animated false 皆為明確值) explicit-empty : item 非 undefined/null 即採用, 含 ''(markerFrom/End 之 '' 為明確「無」, 不落回 defaults——與 edgeMarker 同一規則) truthy(預設) : item 為 truthy 才採用, '' 視為未給 → defaults
(constant) GEAR_PATH
- Description:
元件內建 icon 之 SVG path(節點與連線之設定齒輪共用同一形狀, viewBox 0 0 20 20)
- Source:
元件內建 icon 之 SVG path(節點與連線之設定齒輪共用同一形狀, viewBox 0 0 20 20)
(constant) INFO_POPUP_DEFER_MS
- Description:
dblclick 模式下, 單擊之資訊 popup 延後開啟之雙擊判定窗(ms): 期間收到 dblclick 即取消
- Source:
dblclick 模式下, 單擊之資訊 popup 延後開啟之雙擊判定窗(ms): 期間收到 dblclick 即取消
(constant) MARKER_TYPES
- Description:
邊箭頭(marker)之單一解析來源: EdgeMarkerDefs(產
)與 EdgeWrapper(引用 url(#id))皆經此模組, id 由同一函式產生, 兩端不可能分家。 契約(spec/流程_互動契約.md §4.3): type: conn.marker{End|Start} → defConn.marker{End|Start} → ''(無); conn 明確給 '' 即為無(不落回 defConn) size: conn.marker{End|Start}Size → defConn.marker{End|Start}Size → 10 (圖面 px, 隨 zoom 同比縮放; 不隨線寬) fill: conn.marker{End|Start}FaceColor → defConn.同鍵 → 線色加深 20%(僅 arrowclosed 使用, 三角形填色; arrow 無填充) why 加深: 預設填色與線同色時箭頭與線融成一片, 方向不易辨識; 加深由線色推導, 宿主改線色即跟隨 stroke: conn.marker{End|Start}EdgeColor → defConn.同鍵 → 線色(箭頭外框色; arrow 與 arrowclosed 皆適用) 未給時跟隨線色即為既有行為, 故本欄為向後相容之 opt-in 擴充 strokeWidth = 線寬(箭頭外框與線同粗) type ∈ '' | 'arrow'(線式, 無填充) | 'arrowclosed'(實心)
- Source:
邊箭頭(marker)之單一解析來源: EdgeMarkerDefs(產
契約(spec/流程_互動契約.md §4.3): type: conn.marker{End|Start} → defConn.marker{End|Start} → ''(無); conn 明確給 '' 即為無(不落回 defConn) size: conn.marker{End|Start}Size → defConn.marker{End|Start}Size → 10 (圖面 px, 隨 zoom 同比縮放; 不隨線寬) fill: conn.marker{End|Start}FaceColor → defConn.同鍵 → 線色加深 20%(僅 arrowclosed 使用, 三角形填色; arrow 無填充) why 加深: 預設填色與線同色時箭頭與線融成一片, 方向不易辨識; 加深由線色推導, 宿主改線色即跟隨 stroke: conn.marker{End|Start}EdgeColor → defConn.同鍵 → 線色(箭頭外框色; arrow 與 arrowclosed 皆適用) 未給時跟隨線色即為既有行為, 故本欄為向後相容之 opt-in 擴充 strokeWidth = 線寬(箭頭外框與線同粗) type ∈ '' | 'arrow'(線式, 無填充) | 'arrowclosed'(實心)
(constant) MENU_OPT_KEYS
- Description:
垂直選單設定: 自 opt 原樣透傳(不套預設)——各項未給或型別不符由 Controls.vue 之 menuDef 回退, 預設值單一來源在 Controls(icon 預設需 @mdi/js 常數), 本模組刻意不複製一份。
- Source:
垂直選單設定: 自 opt 原樣透傳(不套預設)——各項未給或型別不符由 Controls.vue 之 menuDef 回退, 預設值單一來源在 Controls(icon 預設需 @mdi/js 常數), 本模組刻意不複製一份。
(constant) NODE_DEFAULTS
- Description:
Default values for node and connection properties.
- Source:
Default values for node and connection properties.
(constant) NODE_SETTING_GROUPS
- Description:
節點設定分群(對應 NodeSettingsForm 之欄位)。 shape 與填色/框線同屬「長什麼樣」故併於 appearance —— 單獨成群時群標題(Shape)與其唯一欄位標籤(Shape)重複。
- Source:
節點設定分群(對應 NodeSettingsForm 之欄位)。 shape 與填色/框線同屬「長什麼樣」故併於 appearance —— 單獨成群時群標題(Shape)與其唯一欄位標籤(Shape)重複。
(constant) NODE_SETTING_KEYS
- Description:
節點設定更新入口受理之欄位(schema allowlist): 已移除之 type / toPosition / fromPosition 不在其中
- Source:
節點設定更新入口受理之欄位(schema allowlist): 已移除之 type / toPosition / fromPosition 不在其中
(constant) RECT_FRACTION
- Description:
連接點幾何 —— 單一事實來源(把手渲染 nodeStyle.handlePlacementStyle 與邊端點 getHandlePosition 同用 sideAnchorFraction)。
契約(spec/流程_互動契約.md §4.1): 節點四邊各一連接點, 位於形狀「該邊」之中點—— 矩形/菱形/橢圓: 外接矩形四邊中點(菱形為四頂點, 橢圓為四極點) 三角形: 頂點所在邊=頂點; 底邊=底邊中點; 兩斜邊=斜邊中點(仍落在外接矩形之 1/4 或 3/4 處) 射出方向恆為外接矩形該邊之法向量(由 side 決定, 與點位無關), 三角形斜邊上之連接點亦水平/垂直射出。
- Source:
連接點幾何 —— 單一事實來源(把手渲染 nodeStyle.handlePlacementStyle 與邊端點 getHandlePosition 同用 sideAnchorFraction)。
契約(spec/流程_互動契約.md §4.1): 節點四邊各一連接點, 位於形狀「該邊」之中點—— 矩形/菱形/橢圓: 外接矩形四邊中點(菱形為四頂點, 橢圓為四極點) 三角形: 頂點所在邊=頂點; 底邊=底邊中點; 兩斜邊=斜邊中點(仍落在外接矩形之 1/4 或 3/4 處) 射出方向恆為外接矩形該邊之法向量(由 side 決定, 與點位無關), 三角形斜邊上之連接點亦水平/垂直射出。
(constant) SETTINGS_TRIGGERS
- Description:
設定齒輪顯示方式
- Source:
設定齒輪顯示方式
(constant) SIDES
- Description:
邊之兩端方位 —— 單一事實來源是「連線」(spec/流程_互動契約.md §4)。
節點四邊中點皆為連接點, 無連出/連入之分; 一條邊記錄自己兩端之方位: fromPosition: from 節點之連接邊; 邊於該點沿該邊之外向法線射出 toPosition: to 節點之連接邊; 邊於該點沿該邊之外向法線射出(自節點看皆為向外, 兩端語義相同) 方向恆為節點外接矩形該邊之外向法向量(四種), 與形狀無關。
解析順序(正式契約): from 端: conn.fromPosition → defConn.fromPosition → 'bottom' to 端: conn.toPosition → defConn.toPosition → 'top'
- Source:
邊之兩端方位 —— 單一事實來源是「連線」(spec/流程_互動契約.md §4)。
節點四邊中點皆為連接點, 無連出/連入之分; 一條邊記錄自己兩端之方位: fromPosition: from 節點之連接邊; 邊於該點沿該邊之外向法線射出 toPosition: to 節點之連接邊; 邊於該點沿該邊之外向法線射出(自節點看皆為向外, 兩端語義相同) 方向恆為節點外接矩形該邊之外向法向量(四種), 與形狀無關。
解析順序(正式契約): from 端: conn.fromPosition → defConn.fromPosition → 'bottom' to 端: conn.toPosition → defConn.toPosition → 'top'
(constant) fixSvgNs
- Description:
Vue 2 bug #7330: 位於
官方applyNS雖於遇到foreignObject時重置後代ns, 但僅走vnode.children; 傳入子元件之slot內容存於componentOptions.children, 不在其巡訪範圍, 故無法被救回。
修正: 於render前清除自身$vnode.ns, 使其createElement改依getTagNamespace決定 (g/path→svg, div/span→HTML), root之
再經applyNS正確處理foreignObject。 用法: 於「內含foreignObject且在
- Source:
Vue 2 bug #7330: 位於
官方applyNS雖於遇到foreignObject時重置後代ns, 但僅走vnode.children; 傳入子元件之slot內容存於componentOptions.children, 不在其巡訪範圍, 故無法被救回。
修正: 於render前清除自身$vnode.ns, 使其createElement改依getTagNamespace決定
(g/path→svg, div/span→HTML), root之
用法: 於「內含foreignObject且在
Methods
applyDelete(graph, plan) → {Object}
- Description:
就地套用刪除: 以 id 重新解析(不信任 preview 當下之物件參照), 自宿主陣列 splice 移除
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
graph |
Object | { nodes, conns } |
plan |
Object | { nodeIds, connIds }(connIds 須已含連帶邊, 本函式不再計算 cascade) |
Returns:
{ nodes, conns } 實際被移除之物件(依 plan 之 id 順序; 不存在者略過)
- Type
- Object
assessConnection()
- Description:
完整判定: 能力層 → 候選建構 → 圖層級判定。 回傳 { valid, reason, connection }; connection 於能力層即拒絕時為 null。
- Source:
assessGraphConnection()
- Description:
圖層級判定: connection 對圖(nodes/conns)與 custom validator 是否合法。 回傳 { valid, reason }; reason ∈ 'no-endpoint'|'self'|'missing-node'|'duplicate'|'custom'|null
- Source:
buildConnectionCandidate()
- Description:
由出發/落點 endpoint 建構候選 connection(preview 與 commit 共用, 不可各自手組)。
- Source:
buildRoundedPath() → {Object}
- Description:
Build a rounded (smoothstep-style) svg path from an orthogonal point list.
- Source:
Returns:
- Type
- Object
canOpenPopup()
- Description:
popup 開啟閘門: 複選模式 或 任何手勢進行中(宿主 getCanOpenPopup)一律拒開
- Source:
canOpenSettings()
- Description:
設定 popup 可否開: 元素可互動(節點 draggable / 連線 interactive)、未上鎖、設定功能啟用、且 popup 閘門放行
- Source:
clampInsets()
- Description:
不可行 padding 之縮限: 單軸兩側和超過「軸長-1」時等比縮至「軸長-1」(保底 1px 可視區, 且可視區必落於容器內 → 內容不會被推出畫面), 其餘原樣不動——只在真不可行時介入, 無魔法比例。
- Source:
clampPosition()
- Description:
Clamp a position within a coordinate extent.
- Source:
clampZoom()
- Description:
縮放夾限: 上界 zoomMax; 下界取 zoomMin 與當前值之較小者(fitView 可低於 zoomMin, 之後滾輪縮放不得跳回)。
- Source:
classifyHit(target, flowRootopt) → {'panel'|'node-gear'|'edge-gear'|'resize'|'handle'|'waypoint'|'node'|'edge'|'canvas'}
- Source:
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
target |
EventTarget | null | ||
flowRoot |
Element | null |
<optional> |
本 flow 實例之根元素; 給定時, 命中元素須位於其內(巢狀/多實例時不撿到他 flow 之元素) |
Returns:
- Type
- 'panel' | 'node-gear' | 'edge-gear' | 'resize' | 'handle' | 'waypoint' | 'node' | 'edge' | 'canvas'
clientToLocal()
- Description:
client 座標 → 相對容器左上之螢幕座標
- Source:
computeCenterView()
- Description:
使畫布點 center 落在容器中央之 viewport
- Source:
computeConnStyle()
- Description:
path 之 inline style。選取態線寬 +1px(與節點選取態外框加粗同一設計語言)。
- Source:
computeEdgeClasses()
- Description:
根
之 class 陣列
- Source:
computeFitView(bounds, container, opt) → {Object|null}
- Description:
使包絡矩形置中於「容器扣除 padding 後之可視區」之 viewport。 padding 為CSS 像素(不隨 zoom 縮放; 零人為留白 = 貼邊——受限軸邊距恰為該邊 padding, 但小圖被 maxZoom 夾住時仍居中而留有更大邊距, 屬 zoomMax 行為非 padding 行為)。 zoom 上限 maxZoom(不設下限: 大圖可低於 zoomMin, 滾輪縮放再以當前值為下界——既有契約)。 不可行 padding(單軸兩側和 > 軸長-1)依 clampInsets 等比縮限, 保底 1px 可視區於容器內。
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
bounds |
Object | |
container |
Object | |
opt |
Returns:
- Type
- Object | null
computeLabelStyle()
- Description:
label 之字級/字色
- Source:
computeResize(edge, start, delta, opt) → {Object}
- Description:
四角縮放代數(NodeWrapper 縮放手勢之純計算): 右/下角改寬高, 左/上角以對邊固定(位置隨之移動)。
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
edge |
'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | |
start |
Object | 起始幾何 |
delta |
Object | 畫布座標位移 |
opt |
Returns:
- Type
- Object
connSourceSide()
- Description:
邊之 from 端方位
- Source:
connTargetSide()
- Description:
邊之 to 端方位
- Source:
crossedThreshold()
- Description:
自 (x0,y0) 位移是否跨過門檻(任一軸 >= threshold)
- Source:
darkenColor()
- Description:
顏色加深(僅處理 #rgb/#rrggbb; 其他格式原樣回傳): 各通道乘以 (1 - ratio)
- Source:
describeHandleEndpoint()
- Description:
把手元素 → endpoint descriptor { nodeId, position, connectable, element }。 把手之身分即「節點 × 邊」(四邊中點, 無連出/連入之分)。 flowId 歸屬檢查: 把手必須屬於本 flow 實例(頁面可能有多個/巢狀 flow, elementFromPoint 可能撿到他 flow 之把手; 以最近之 [data-flow-id] 祖先比對, 不符即回 null)。
- Source:
easeInOutCubic()
- Description:
緩動(panToNode 動畫)
- Source:
effectiveAnimated()
- Description:
animated: 邊未設定才繼承 defConn(明確 false 覆寫)
- Source:
effectiveEdgeType()
- Description:
有效邊型: conn.type → defConn.type → CONN_DEFAULTS.type
- Source:
findDuplicateIds(list) → {Array}
- Description:
找出集合內重複之 id(宿主資料錯誤之防呆; 重複 id 會使一切以 id 為鍵之查找/對帳/Vue key 失效)
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
list |
Array |
Returns:
重複之 id(每個只列一次, 依首次重複出現順序)
- Type
- Array
findHandleElAt()
- Description:
取游標座標下之把手元素(無則 null)。
- Source:
flowToScreen()
- Description:
畫布座標 → 螢幕座標(相對容器左上)
- Source:
gearVisible()
- Description:
齒輪 icon 是否顯示: 只有 hover 模式於移入時顯示(click/dblclick 模式不顯示齒輪, 直接開設定 popup)
- Source:
generateId()
- Description:
Generate a unique ID.
- Source:
gestureBlockedReason() → {string|null}
- Description:
手勢啟動守衛(把手/四角/轉折點/節點共用之三段判準): 主鍵、非複選模式、無進行中手勢。
- Source:
Returns:
拒絕原因 'button' | 'multiselect' | 'gesture', 可啟動回 null
- Type
- string | null
getBezierPath() → {Object}
- Description:
Get bezier curve path.
- Source:
Returns:
- Type
- Object
getControlOffset()
- Description:
Calculate the control point offset for bezier curves based on handle position.
- Source:
getHandlePosition(node, side, nodeInternalsopt, defNodeopt)
- Description:
節點某邊連接點之畫布絕對座標(邊端點與把手圓心同一基準)。
- Source:
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
node |
Object | ||
side |
string | 'top'|'right'|'bottom'|'left' |
|
nodeInternals |
Object |
<optional> |
量測尺寸 { width, height }(優先於 node.width/height) |
defNode |
Object |
<optional> |
節點預設(形狀之 defNode 層, 經 nodeStyle.nodeShape 單一解析) |
getOverlappingNodes()
- Description:
Get all nodes that overlap with a given rectangle.
- Source:
getPathFunction()
- Description:
邊型 → 路徑函式(未知邊型回 bezier); EdgeWrapper 與 ConnectionLine 共用同一對照表
- Source:
getSmoothStepPath() → {Object}
- Description:
Get smooth step (rounded right-angle) path.
- Source:
Returns:
- Type
- Object
getStepPath() → {Object}
- Description:
Get step (right-angle) path.
- Source:
Returns:
- Type
- Object
getStraightPath() → {Object}
- Description:
Get straight line path.
- Source:
Returns:
- Type
- Object
handlePlacementStyle()
- Description:
把手定位(inline style): 圓心 = 節點外框盒上 sideAnchorFraction 所指之點(與 geometry.getHandlePosition 同一 fraction)。 把手為節點 padding box 內之絕對定位元素, 以百分比取 fraction, 落在外框盒邊上者再外推節點外框寬(nodeBorder); translate(-50%,-50%) 置中, 故 hover 放大時圓心不動。
- Source:
handleStyleVars()
- Description:
把手樣式(CSS 變數): 由 defNode 之 handle* 解析, 供 Handle 以 inline style 注入 --vf-hs 尺寸 / --vf-hface 面色 / --vf-hedge 框線色 / --vf-hew 框線寬
- Source:
infoOpenPlan()
- Description:
資訊 popup 開啟請求之處置: 'reject' 閘門不放行; 'yield' click 模式且可開設定: 資訊 popup 讓位給設定 popup(兩者同為點擊觸發, 不可同時); 'defer' dblclick 模式且可開設定: 延後一個雙擊判定窗再開(瀏覽器於雙擊前必先派發 click, 立即開會先閃現再被設定 popup 取代); 'open' 立即開。
- Source:
installGlobalCursor()
- Description:
全域游標鎖定(手勢期間整頁同一游標); 回傳移除函式(可重複呼叫)
- Source:
isAffordanceHit()
- Description:
affordance(gear/resize/handle/waypoint/panel): 其點擊類事件不代表宿主元素或畫布
- Source:
isCanvasBlank()
- Description:
畫布層手勢(平移/框選/pane-click)之目標排除: 非畫布空白即排除
- Source:
isDarkColor()
- Description:
判斷一個 CSS 色字串是否為深色(相對亮度 < 0.5)。支援 #rgb / #rrggbb / rgb(a)(); 認不得的字串(具名色、hsl、漸層…)一律回 false —— 寧可維持淺色預設, 不亂猜。
用途: 群標題之底色/三角形色須隨 popup 底色走。淺色底以「疊黑」加深、深色底須改為「疊白」加亮, 否則深色 popup 上的標題帶會比背景更暗、三角形直接看不見。
- Source:
isSide()
- Description:
是否為合法方位值
- Source:
labelAtHalfLength()
- Description:
Find the point at exactly half the total Manhattan path length.
- Source:
labelOffsetStyle()
- Description:
三角形節點之文字位移(往形狀重心方向): 使 label 落在三角形內部而非外接矩形中心
- Source:
lookupRoute()
- Description:
draw.io OrthConnector route generation. Uses bit-encoded route patterns + quad rotation + limits clamping. Returns waypoint array or null (fallback needed).
- Source:
markerDef()
- Description:
繪製屬性: viewBox 0 0 12 12, 三角形佔 1..11(四周留 1 單位供外框描邊, 不被 marker 之 overflow 裁切); 尖端 (11,6) 對齊路徑端點; markerUnits=userSpaceOnUse 使 size 為圖面 px(隨 viewport zoom 同比縮放, 與節點/線同; 不隨線寬)。外框線寬以 viewBox 單位換算: 線寬 × 12 / size, 上限 2(留白之兩倍, 超出即會被裁切)。
- Source:
markerId()
- Description:
marker 元素 id(同規格同 id 供 defs 去重; 不同規格必不同 id)。 各欄以單射編碼(非英數字元 → '_' + 十六進位碼), 欄間以 '-'(不會出現於編碼結果)分隔, 故 'rgb(1, 23, 4)'+1.2 與 'rgb(12, 3, 4)'+12 之類的組合不會撞 id。
- Source:
markerUrl()
- Description:
url(#id) 供 path 之 marker-start/marker-end; 無箭頭回 null
- Source:
nodeBorderWidth()
- Description:
節點外框(CSS border)寬度(px): 矩形=節點/預設之 edgeWidth; SVG 形狀(菱形/橢圓/三角)之外框由 SVG stroke 繪製, 容器本身 border 為 0——使 padding box 與外框盒重合, 形狀 stroke、把手圓心、連線端點三者同以外框盒為基準
- Source:
nodeShape()
- Description:
節點有效形狀(單一來源): node.shape → defNode.shape → 'rectangle'; 非法值視為未給。 節點面(NodeFace)、外框判定、把手佈局(NodePorts)、邊端點(geometry)皆須經此解析, 否則 defNodeShape 設定時各層分家。
- Source:
nodesBounds() → {Object|null}
- Description:
可見節點之包絡矩形(hidden 節點不計)。
- Source:
Returns:
無可見節點回 null
- Type
- Object | null
oppositeSide()
- Description:
對邊(建線中無 hover 落點時預覽線遠端之預設方位)
- Source:
optComputeds()
- Description:
供 Vue computed 展開: 每個 OPT_SPEC 鍵一個 computed(讀 this.opt)
- Source:
orthogonalizeThroughPoints()
- Description:
Build an orthogonal point list passing through forced waypoints.
- Leaves the source along its anchor axis (perpendicular to the node edge).
- Turns AT each waypoint (leaves it along the other axis than it arrived on).
- Arrives at the target along its anchor axis. Inserts at most one corner between consecutive points; skips zero-length segments.
- Source:
pairEndpoints()
- Description:
出發/落點能力層判定; 不可配對時回 { reason }, 可配對回 {}。 順序: no-endpoint → unknown-handle → self → not-connectable。
- Source:
parseWaypoints()
- Description:
轉折點嚴格解析(runtime domain parser): [[x,y],...] 或 [{x,y},...] → [{x,y},...]; 任一點非有限數即整批無效回 null(呼叫端回退自動路由)。 表單之草稿容錯解析另在 ConnSettingsForm.draftWaypoints(語義不同, 不共用)。
- Source:
parseWaypoints()
- Description:
轉折點嚴格解析(runtime domain parser): [[x,y],...] 或 [{x,y},...] → [{x,y},...]; 任一點非有限數即整批無效回 null(呼叫端回退自動路由)。表單之草稿容錯解析另在 ConnSettingsForm(draft parser), 語義不同不共用。
- Source:
pickMenuValue()
- Description:
取單項設定值, 型別與menuDef同型且有效才採用, 否則回退menuDef
- Source:
previewDelete(graph, target) → {Object}
- Description:
預覽刪除(無副作用): 解析目標、套用 deletable 政策、計算連帶邊, 產出可供確認閘門與提交共用之 plan
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
graph |
Object | { nodes, conns } |
target |
Object | { nodeIds=[], connIds=[] } |
Returns:
plan requested: { nodeIds, connIds } 去重後之直接要求 nodeIds / connIds 將被刪除之 id(connIds 含連帶, 已去重, 依圖內順序) nodes / conns 對應之圖內物件(同上順序; conns = 直接指定者在前、連帶者在後) cascades: [{ nodeId, connIds }] 各節點連帶刪除之邊(僅列「非直接指定」者) notFound: { nodeIds, connIds } 直接要求但圖上不存在者 excluded: { nodeIds, connIds } 直接要求但 deletable:false 而最終未刪者 empty: Boolean requested 為空
- Type
- Object
recenterForResize()
- Description:
容器尺寸改變之視口補正: 舊容器中心之畫布點於新容器仍居中(zoom 不變)——地圖庫慣例(Leaflet invalidateSize pan:true)。 推導: 舊中心畫布點 c = (oldW/2 - x)/z; 令 newW/2 = c*z + x' → x' = x + (newW - oldW)/2(y 同理)。
- Source:
rectsOverlap()
- Description:
Check if two rectangles overlap.
- Source:
resolveContainerSize()
- Description:
容器尺寸: rect 之寬/高逐軸須為正的有限數, 否則該軸回退 fallback(未佈局/jsdom 之 0×0 不得使 zoom 變 0)。
- Source:
resolveDefConn()
- Description:
連線預設(opt.defConn* → CONN_DEFAULTS): 兩端方位/箭頭/animated/step offset 皆在此
- Source:
resolveDefNode()
- Description:
節點預設(opt.defNode* / opt.defHandle* → NODE_DEFAULTS); 數值型以 !== undefined 判斷(0 為合法之框線寬)
- Source:
resolveLineStyle()
- Description:
線色/線寬解析(與 EdgeWrapper.connStyle 同一順序)
- Source:
resolveMarker(conn, defConn, end) → {Object|null}
- Description:
解析某端之 marker 規格; 無箭頭回 null。
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
conn |
Object | |
defConn |
Object | |
end |
'from' | 'to' |
Returns:
- Type
- Object | null
resolveNodeSize(node, liveopt, defNodeopt) → {Object}
- Description:
節點有效尺寸 —— 單一事實來源(幾何/路由/fit/形狀面/佈局共用同一優先序)。 優先序: 實測尺寸(live: 量測或進行中 ghost, 須為正數)→ 節點明確數值 → defNode(opt.defNodeWidth/Height)→ NODE_DEFAULTS。 佈局(CSS width/height)不得把實測值回寫為尺寸來源, 故呼叫端傳 live=null 即取「宣告尺寸」。
- Source:
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
node |
Object | ||
live |
Object | null |
<optional> |
{ width, height } 實測或 ghost |
defNode |
Object |
<optional> |
Returns:
- Type
- Object
resolveOpt()
- Description:
全部純量鍵一次解析(測試/除錯用; 元件內以 optComputeds 逐鍵 computed, 避免整包失效)
- Source:
resolveOptValue()
- Description:
依 OPT_SPEC 解析單一鍵
- Source:
resolvePadding(padding, fallbackopt)
- Description:
padding 正規化為四邊(單位一律為螢幕像素, 同 Leaflet fitBounds padding 與 OpenLayers View.fit padding)。 輸入可為數值(四邊同值)或 { top, right, bottom, left }(缺漏/非法之邊逐一回退 fallback 之同一邊)。
- Source:
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
padding |
||||
fallback |
number | object |
<optional> |
0
|
同型輸入; 其自身非法者再回退 0 |
resolveSettingsText()
- Description:
設定表單可改文字(非字串或空字串回退預設)
- Source:
screenToFlow()
- Description:
螢幕座標(相對容器左上)→ 畫布座標
- Source:
segmentFallback()
- Description:
SegmentConnector fallback (draw.io style). Used when nodes are too close for OrthConnector (tooShort).
- Source:
setDomFlag()
- Description:
通用 dataset 旗標(出發節點 data-connect-origin-node、手勢擁有者 data-gesture-owner): 與把手標記同理——未列於模板之 data-* 屬性不受 Vue patch 影響, 純 CSS 即可據以切換視覺, 不觸發任何重渲染。 value 為空即移除。
- Source:
setHandleConnectRole()
- Description:
標記/清除出發把手(role: 'origin')。
- Source:
setHandleConnectStatus()
- Description:
標記游標下把手之判定結果('valid' | 'invalid'); status 為空即清除。
- Source:
settingsOpensOn()
- Description:
某互動事件(click / dblclick)是否為當前模式之「直接開設定」入口
- Source:
sideAnchorFraction()
- Description:
形狀 × 邊 → 連接點於外接矩形之比例座標 { fx, fy } ∈ [0,1]
- Source:
sideNormal()
- Description:
邊之外向單位法向量(方位 → 方向; 非法方位視為 bottom)
- Source:
snapPosition(position, gridSize)
- Description:
Snap a position to the nearest grid point.
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
position |
Object | |
gridSize |
number | null | Grid cell size (single number for both axes) |
snapshotDeep()
- Description:
深複製快照(與內部狀態脫鉤): 事件為歷史紀錄, 不得因後續畫布變動而失真, 亦防宿主改動事件物件汙染內部。 採 JSON 往返(與 getFlowData 同策略): 函式/undefined 欄位不保留。
- Source:
startDocumentGesture(o)
- Description:
啟動一段 document 層手勢。
- Source:
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
o |
Object | |||
|
||||
|
||||
o.cursor |
string |
<optional> |
期間鎖定之全域游標 |
|
o.requirePrimary |
boolean |
<optional> |
true
|
mousemove 時主鍵已放開即以 'buttons-lost' 終止 |
Returns:
stubFallback()
- Description:
方向保證之 fallback(任一端無節點矩形時, 如建線預覽之游標端): 兩端各沿外向法線走 stub, 兩 stub 端點間以 L/Z 形直角相連。
- Source:
titleCase()
- Description:
kebab-case 值 → 顯示文字(triangle-up → Triangle Up)
- Source:
uniq()
- Description:
graphMutation — 圖資料之變更核心(無框架、無狀態純函式)
邊界(三層架構之最底層):
- 只處理 id 解析/去重、連帶(cascade)計算、deletable 政策、就地套用與 change record 產出;
- 不碰 Vue instance、$emit、選取、拖曳 ghost、路由 cache——那些屬 WFlowVue 內之 transaction coordinator。
- graph = { nodes, conns } 為宿主陣列本身(1.x 維持「宿主陣列就地 mutate」模型), 每次呼叫皆重新解析, 不快取任何狀態; preview 無副作用, apply 才 splice。
政策(1.x 定案):
- id 為 opaque identity(嚴格相等比對), 不強制轉字串; 只要求各集合內唯一。
- deletable:false 只阻止「被直接指定刪除」; 刪除節點時參照完整性優先, 其相鄰邊不論 deletable 一律連帶移除 (否則留下端點已消失之孤兒邊)。被連帶刪除者列入 deleted 而非 excluded。
- Source:
visibleGroups()
- Description:
依排除清單過濾: 回傳仍有可見欄位之群(順序不變)
- Source:
zoomAroundPoint()
- Description:
以焦點(容器相對座標)為錨之縮放: 焦點下之畫布點於縮放前後不動。
- Source:
Events
elements-deleted 所有刪除路徑完成後皆發出(於 update:* 之後、最後發出),payload: { from, requested:{nodeIds,connIds}, deleted:{nodeIds,connIds,nodes,conns}, cascades:[{nodeId,connIds}], notFound:{nodeIds,connIds}, excluded:{nodeIds,connIds} } - deleted.nodes/conns 為被刪當下之深複製快照(JSON 往返,同 getFlowData);id 清單供輕量記帳; - cascades 只描述因果(哪條邊因哪個節點而刪),記帳以 deleted.*Ids 為準(已去重); - 不含刪後全量快照(remain):需要者呼叫 getFlowData() 或沿用 update:nodes / update:conns。 刪除只有這一個完成事件。所有入口同一序列:(僅實際變動之集合)update:nodes → update:conns → elements-deleted。
- Description:
WFlowVue — Vue 2 flow/graph editor component.
All configuration is passed via the
optprop object.
- Source:
Properties:
| Name | Type | Description | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
opt |
Object | ─── Canvas ──────────────────────────────────────────────────────────── Properties
|