Mindmap

renderOptions = {
    zoomToFit:true,
    layout:{
      type:MINDMAP_LAYOUT
    },
    // show connections to ports as being attached to their parent nodes. We use this for the main node: its edges
    // are connected to either a `right` or `left` port on the main node, but these ports are logical ports only - they
    // do not have their own DOM element assigned.
    logicalPorts:true,

    // in this app, elements are not draggable; they are fixed by the layout.
    elementsDraggable:false,
    // Run a relayout whenever a new edge is established, which happens programmatically when the user adds a new subtopic.
    refreshLayoutOnEdgeConnect:true,
    // for the purposes of testing. Without this the right mouse button is disabled by default.
    consumeRightClick:false,
    defaults:{
      connector:{
        type:StraightConnector.type,
        options:{
          stub:20
        }
      },
      anchor:[ AnchorLocations.Left, AnchorLocations.Right ]
    },
    events:{
      [EVENT_CANVAS_CLICK]:() => this.toolkit.clearSelection()
    }
  }

import {Injectable} from "@angular/core"
import {DEFAULT_ANGULAR_TOOLKIT_ID, jsPlumbService} from "@jsplumbtoolkit/browser-ui-angular"
import {Node, uuid} from "@jsplumbtoolkit/browser-ui"
import {DIRECTION, SUBTOPIC} from "./definitions"

@Injectable()
export class MindmapService {

  constructor(private jsplumb:jsPlumbService) { }

  info(v:Node) {
    const toolkit = this.jsplumb.getToolkit(DEFAULT_ANGULAR_TOOLKIT_ID)
    toolkit.setSelection(v)
  }

  deleteVertex(v:Node) {
    const toolkit = this.jsplumb.getToolkit(DEFAULT_ANGULAR_TOOLKIT_ID)
    // select the node that was clicked and all of its descendants (we get a Selection object back)
    const nodeAndDescendants = toolkit.selectDescendants(v, true)
    // inside a transaction, remove everything in that selection from the Toolkit (including edges to each of the nodes).
    // we do this inside a transaction so we can undo the whole operation as one unit.
    toolkit.transaction(() => {
      toolkit.remove(nodeAndDescendants)
    })
  }

  addChild(v:Node, direction?:DIRECTION) {

    const toolkit = this.jsplumb.getToolkit(DEFAULT_ANGULAR_TOOLKIT_ID)

    // for edges from the main node, we attach them to a port on the node, because the main node can
    // have `left` and `right` edges. For subtopic nodes we attach directly to the node. So this code tests
    // for a matching port and uses it as the source if found, otherwise it uses the source node.
    const source = direction != null ? v.getPort(direction) : v
    const payload = {
      id:uuid(),
      parentId:v.id,
      label:"New subtopic",
      children:[],
      type:SUBTOPIC,
      direction
    }

    toolkit.transaction(() => {
      const node = toolkit.addNode(payload)
      toolkit.addEdge({source, target:node})
    })

  }
}

            

const renderOptions = {
  // in this app, elements are not draggable; they are fixed by the layout.
  elementsDraggable:false,
  // after load, zoom the display so all nodes are visible.
  zoomToFit:true,
  // show connections to ports as being attached to their parent nodes. We use this for the main node: its edges
  // are connected to either a `right` or `left` port on the main node, but these ports are logical ports only - they
  // do not have their own DOM element assigned.
  logicalPorts:true,
  // Run a relayout whenever a new edge is established, which happens programmatically when the user adds a new subtopic.
  refreshLayoutOnEdgeConnect:true,
  // for the purposes of testing. Without this the right mouse button is disabled by default.
  consumeRightClick:false,
  // Use our custom mindmap layout.
  layout:{
    type:MindmapLayout.type,
  },
  defaults:{
    connector:{
      type:StraightConnector.type,
      options:{
        stub:20
      }
    },
    anchor:[ AnchorLocations.Left, AnchorLocations.Right ]
  },
  events:{
    [EVENT_CANVAS_CLICK]:() => toolkit.current.clearSelection()
  }
}