Merge pull request #282 from wrayzheng/feat/edge-selection

More Efficient Edge Selection

Author: Developer-Mike

README.md

@@ -45,6 +45,7 @@ This plugin enhances the Obsidian canvas with a wide array of features:
     *   [Portals](#portals): Embed other canvases within your current canvas.
     *   [Collapsible Groups](#collapsible-groups): Organize your canvas with expandable/collapsible groups.
     *   [Edge Highlight](#edge-highlight): Highlight edges when a connected node is selected.
+    *   [Edge Selection](#edge-selection): Select edges connected to the selected node(s).
     *   [Focus Mode](#focus-mode): Highlight a single node by blurring others.
     *   [Encapsulate Selection](#encapsulate-selection): Move selected nodes to a new canvas, linking back to it.
     *   Create groups independently of the nodes.
@@ -513,6 +514,28 @@ Flip the direction of an edge with one click.
     <img src="https://raw.githubusercontent.com/Developer-Mike/obsidian-advanced-canvas/main/assets/docs/flip-edge.gif" alt="Flip Edge Example"/>
 </details>
 
+## Edge Selection
+Select edges connected to the selected node(s).
+
+<details>
+    <summary>Select Connected Edges Example</summary>
+    <img src="https://raw.githubusercontent.com/Developer-Mike/obsidian-advanced-canvas/main/assets/docs/select-connected-edges.gif" alt="Select Connected Edges Example"/>
+</details>
+
+### Select By Direction
+Select incoming or outgoing edges of the selected node(s).
+Note: this requires the setting `Edge Selection > Select Edge By Direction` to be enabled.
+
+<details>
+    <summary>Select Outgoing Edges Example</summary>
+    <img src="https://raw.githubusercontent.com/Developer-Mike/obsidian-advanced-canvas/main/assets/docs/select-outgoing-edges.gif" alt="Select Outgoing Edges Example"/>
+</details>
+
+<details>
+    <summary>Select Incoming Edges Example</summary>
+    <img src="https://raw.githubusercontent.com/Developer-Mike/obsidian-advanced-canvas/main/assets/docs/select-incoming-edges.gif" alt="Select Incoming Edges Example"/>
+</details>
+
 ## Canvas Events
 All custom events are prefixed with `advanced-canvas:` and can be listened to using `app.workspace.on` (just like default Obsidian events).
 Check out the list of events [here](https://github.com/Developer-Mike/obsidian-advanced-canvas/blob/main/src/%40types/CustomWorkspaceEvents.d.ts).

assets/docs/select-connected-edges.gif

@@ -1,4 +1,4 @@
-import { Canvas, CanvasNode } from "src/@types/Canvas"
+import { Canvas, CanvasEdge, CanvasNode } from "src/@types/Canvas"
 import BBoxHelper from "src/utils/bbox-helper"
 import CanvasHelper from "src/utils/canvas-helper"
 import { FileSelectModal } from "src/utils/modal-helper"
@@ -129,6 +129,36 @@ export default class CommandsCanvasExtension extends CanvasExtension {
       )
     })
 
+    this.plugin.addCommand({
+      id: 'select-connected-edges',
+      name: 'Select connected edges',
+      checkCallback: CanvasHelper.canvasCommand(
+        this.plugin,
+        (canvas: Canvas) => canvas.selection.size > 0,
+        (canvas: Canvas) => CanvasHelper.selectEdgesForNodes(canvas, 'connected')
+      )
+    })
+
+    this.plugin.addCommand({
+      id: 'select-incoming-edges',
+      name: 'Select incoming edges',
+      checkCallback: CanvasHelper.canvasCommand(
+        this.plugin,
+        (canvas: Canvas) => canvas.selection.size > 0,
+        (canvas: Canvas) => CanvasHelper.selectEdgesForNodes(canvas, 'incoming')
+      )
+    })
+
+    this.plugin.addCommand({
+      id: 'select-outgoing-edges',
+      name: 'Select outgoing edges',
+      checkCallback: CanvasHelper.canvasCommand(
+        this.plugin,
+        (canvas: Canvas) => canvas.selection.size > 0,
+        (canvas: Canvas) => CanvasHelper.selectEdgesForNodes(canvas, 'outgoing')
+      )
+    })
+
     this.plugin.addCommand({
       id: 'swap-nodes',
       name: 'Swap nodes',

assets/docs/select-incoming-edges.gif

@@ -0,0 +1,77 @@
+import { Canvas, CanvasEdge } from "src/@types/Canvas"
+import CanvasExtension from "./canvas-extension"
+import CanvasHelper, { ConnectionDirection, MenuOption } from "src/utils/canvas-helper"
+
+const DIRECTION_MENU_MAP: Record<ConnectionDirection, MenuOption> = {
+  connected: {
+    id: 'select-connected-edges',
+    icon: 'arrows-selected',
+    label: 'Select Connected Edges',
+  },
+  outgoing: {
+    id: 'select-outgoing-edges',
+    icon: 'arrow-right-selected',
+    label: 'Select Outgoing Edges',
+  },
+  incoming: {
+    id: 'select-incoming-edges',
+    icon: 'arrow-left-selected',
+    label: 'Select Incoming Edges',
+  },
+}
+
+export default class EdgeSelectionCanvasExtension extends CanvasExtension {
+  isEnabled() { return 'edgeSelectionEnabled' as const }
+
+  init() {
+    this.plugin.registerEvent(this.plugin.app.workspace.on(
+      'advanced-canvas:popup-menu-created',
+      (canvas: Canvas) => this.onPopupMenuCreated(canvas)
+    ))
+  }
+
+  private onPopupMenuCreated(canvas: Canvas) {
+    const popupMenuEl = canvas?.menu?.menuEl
+    if (!popupMenuEl) return
+
+    const selectionNodeData = canvas.getSelectionData().nodes
+    if (canvas.readonly || selectionNodeData.length === 0) return
+
+    const selectEdgeByDirection = this.plugin.settings.getSetting("selectEdgeByDirection")
+    const menuDirectionSet = new Set<ConnectionDirection>(['connected'])
+
+    if (selectionNodeData.length === 1) {
+      // for better user experience and performance,
+      // reduce unapplicable options for frequent use case
+      const node = canvas.nodes.get(selectionNodeData[0].id)
+      if (!node) return
+      
+      const edges = canvas.getEdgesForNode(node)
+      // hide all options if no edges
+      if (edges.length === 0) return
+
+      // add options depending on edge types
+      if (selectEdgeByDirection) {
+        edges.forEach(edge => {
+          if (edge.from.node === node) {
+            menuDirectionSet.add('outgoing')
+          } else if (edge.to.node === node) {
+            menuDirectionSet.add('incoming')
+          }
+        })
+      }
+    } else if (selectEdgeByDirection) {
+      // add all options if multiple nodes selected
+      menuDirectionSet.add('outgoing')
+      menuDirectionSet.add('incoming')
+    }
+
+    menuDirectionSet.forEach(direction => {
+      const config = DIRECTION_MENU_MAP[direction]
+      CanvasHelper.addPopupMenuOption(canvas, CanvasHelper.createPopupMenuOption({
+        ...config,
+        callback: () => CanvasHelper.selectEdgesForNodes(canvas, direction)
+      }))
+    })
+  }
+}

assets/docs/select-outgoing-edges.gif

@@ -41,6 +41,7 @@ import CollapsibleGroupsCanvasExtension from './canvas-extensions/collapsible-gr
 import FocusModeCanvasExtension from './canvas-extensions/focus-mode-canvas-extension'
 import AutoFileNodeEdgesCanvasExtension from './canvas-extensions/auto-file-node-edges-canvas-extension'
 import FlipEdgeCanvasExtension from './canvas-extensions/flip-edge-canvas-extension'
+import EdgeSelectionCanvasExtension from './canvas-extensions/edge-selection-canvas-extension'
 import ExportCanvasExtension from './canvas-extensions/export-canvas-extension'
 import FloatingEdgeCanvasExtension from './canvas-extensions/floating-edge-canvas-extension'
 import EdgeHighlightCanvasExtension from './canvas-extensions/edge-highlight-canvas-extension'
@@ -101,6 +102,7 @@ const CANVAS_EXTENSIONS: typeof CanvasExtension[] = [
   ExportCanvasExtension,
   FocusModeCanvasExtension,
   EncapsulateCanvasExtension,
+  EdgeSelectionCanvasExtension,
 ]
 
 export default class AdvancedCanvasPlugin extends Plugin {

src/canvas-extensions/commands-canvas-extension.ts

@@ -102,6 +102,9 @@ export interface AdvancedCanvasPluginSettingsValues {
 
   edgeHighlightEnabled: boolean
   highlightIncomingEdges: boolean
+
+  edgeSelectionEnabled: boolean
+  selectEdgeByDirection: boolean
 }
 
 export const DEFAULT_SETTINGS_VALUES: AdvancedCanvasPluginSettingsValues = {
@@ -194,6 +197,9 @@ export const DEFAULT_SETTINGS_VALUES: AdvancedCanvasPluginSettingsValues = {
 
   edgeHighlightEnabled: false,
   highlightIncomingEdges: false,
+
+  edgeSelectionEnabled: false,
+  selectEdgeByDirection: false,
 }
 
 export const SETTINGS = {
@@ -591,6 +597,18 @@ export const SETTINGS = {
       }
     }
   },
+  edgeSelectionEnabled: {
+    label: 'Edge selection',
+    description: 'Select edges connected to the selected node(s) using the popup menu.',
+    infoSection: 'edge-selection',
+    children: {
+      selectEdgeByDirection: {
+        label: 'Select edge by direction',
+        description: 'Select incoming or outgoing edges using separate popup menu items.',
+        type: 'boolean'
+      }
+    }
+  },
   focusModeFeatureEnabled: {
     label: 'Focus mode',
     description: 'Focus on a single node and blur all other nodes.',

src/canvas-extensions/edge-selection-canvas-extension.ts

@@ -12,6 +12,8 @@ export interface MenuOption {
   callback?: () => void
 }
 
+export type ConnectionDirection = 'connected' | 'outgoing' | 'incoming'
+
 export default class CanvasHelper {
   static readonly GRID_SIZE = 20
 
@@ -435,4 +437,34 @@ export default class CanvasHelper {
 
     return bestSide!
   }
+
+  static selectEdgesForNodes(canvas: Canvas, direction: ConnectionDirection) {
+    const selection = canvas.getSelectionData()
+    if (selection.nodes.length === 0) return
+
+    const edges: Set<CanvasEdge> = new Set()
+
+    for (const nodeData of selection.nodes) {
+      const node = canvas.nodes.get(nodeData.id)
+      if (!node) continue
+
+      for (const edge of canvas.getEdgesForNode(node)) {
+        switch (direction) {
+          case 'connected':
+            edges.add(edge)
+            break
+          case 'incoming':
+            if (edge.to.node === node) edges.add(edge)
+            break
+          case 'outgoing':
+            if (edge.from.node === node) edges.add(edge)
+            break
+        }
+      }
+    }
+
+    canvas.updateSelection(() => {
+      canvas.selection = edges
+    })
+  }
 }

src/main.ts

@@ -38,6 +38,36 @@ const CUSTOM_ICONS = {
 
   'pathfinding-method-bezier': `<path stroke="currentColor" fill="none" stroke-width="8.5" d="M37.5 79.1667h35.4167a14.5833 14.5833 90 000-29.1667h-45.8333a14.5833 14.5833 90 010-29.1667H62.5"/>`,
   'pathfinding-method-square': `<path stroke="currentColor" fill="none" stroke-width="8.5" d="M72.9167 79.1667 72.9167 50 27.0833 50 27.0833 20.8333"/>`,
+
+  'arrows-selected': `
+    <g stroke-width="2" stroke="currentColor" fill="none">
+      <defs>
+        <marker id="arrow-right" markerWidth="10" markerHeight="7" refX="2" refY="3.5" orient="auto"> <polygon points="2 2, 5 3.5, 2 5" /> </marker>
+        <marker id="arrow-left" markerWidth="10" markerHeight="7" refX="4" refY="3.5" orient="auto"> <polygon points="1 3.5, 4 2, 4 5" /> </marker>
+      </defs>
+      <rect height="100" width="100" stroke-width="15" stroke="currentColor" stroke-dasharray="8,8" fill="transparent"/>
+      <line x1="20" y1="30" x2="60" y2="30" stroke-width="5" marker-end="url(#arrow-right)"/>
+      <line x1="40" y1="70" x2="80" y2="70" stroke-width="5" marker-start="url(#arrow-left)"/>
+    </g>
+  `,
+  'arrow-right-selected': `
+    <g stroke-width="2" stroke="currentColor" fill="none">
+      <defs>
+          <marker id="arrow-right" markerWidth="10" markerHeight="7" refX="2" refY="3.5" orient="auto"> <polygon points="2 2, 5 3.5, 2 5" /> </marker>
+      </defs>
+      <rect height="100" width="100" stroke-width="15" stroke="currentColor" stroke-dasharray="8,8" fill="transparent"/>
+      <line x1="20" y1="50" x2="60" y2="50" stroke-width="5" marker-end="url(#arrow-right)"/>
+    </g>
+  `,
+  'arrow-left-selected': `
+    <g stroke-width="2" stroke="currentColor" fill="none">
+      <defs>
+          <marker id="arrow-left" markerWidth="10" markerHeight="7" refX="4" refY="3.5" orient="auto"> <polygon points="1 3.5, 4 2, 4 5" /> </marker>
+      </defs>
+      <rect height="100" width="100" stroke-width="15" stroke="currentColor" stroke-dasharray="8,8" fill="transparent"/>
+      <line x1="40" y1="50" x2="80" y2="50" stroke-width="5" marker-start="url(#arrow-left)"/>
+    </g>
+  `,
 }
 
 export default class IconsHelper {