fskpf

  // configure a wrapping label style
  graphComponent.graph.nodeDefaults.labels.layoutParameter = InteriorStretchLabelModel.CENTER
  graphComponent.graph.nodeDefaults.labels.style = new DefaultLabelStyle({
    wrapping: TextWrapping.WORD
  })
  
  // listen for label text changes changes
  geim.addLabelTextChangedListener((sender, args) => {
    const label = args.item
    if (args.owner instanceof INode && label.style instanceof DefaultLabelStyle) {

fskpf

/**
 * Configures the CreateEdgeInputMode such that it may end on an empty canvas with double click (or on an existing node)
 * but still create bends with single click.
 * @param {CreateEdgeInputMode} ceim
 */
function configureHybridEdgeCreation(ceim) {
  // Some state keeping between various parts of the gesture
  var lastEventTimestamp = new Date('0001-01-01T00:00:00Z')
  var isValidFinishHere = false

fskpf

import {
  GraphEditorInputMode,
  GraphItemTypes,
  IEdge,
  ListEnumerable,
  NodeDropInputMode,
  SimpleBend,
  SimpleEdge
} from 'yfiles'

fskpf

async function exportImage() {
  mainComponent.updateContentRect()
  timelineComponent.contentRect = new Rect(0, 0, mainComponent.contentRect.bottomRight.x, 70)
  taskComponent.updateContentRect()

  const exporter = new SvgExport(mainComponent.contentRect, 1)
  exporter.encodeImagesBase64 = true
  exporter.inlineSvgImages = true

  exporter.worldBounds = new Rect(Point.ORIGIN, mainComponent.contentRect.bottomRight)

fskpf

export default class ImageVisualCreator extends BaseClass<IVisualCreator>(IVisualCreator) {
  private readonly image: SVGImageElement

  constructor() {
    super()
    const image = window.document.createElementNS('http://www.w3.org/2000/svg', 'image')
    image.setAttribute('width', '640')
    image.setAttribute('height', '480')
    image.setAttribute('x', '-150')
    image.setAttribute('y', '-160')

fskpf

// USAGE
const gvim = new GraphViewerInputMode()
gvim.add(new MyDragInputMode())
graphComponent.inputMode = gvim

graphComponent.inputMode.addItemDoubleClickedListener(() => console.log('ItemDoubleClicked'))


// THE CUSTOM DRAG INPUT MODE
class MyDragInputMode extends InputModeBase {

fskpf

// ADD A CONTAINER IN THE INDEX.HTML THAT HOLDS THE LEGEND SVGs:
// <style>
//     #graph-legend .legend-entry {
//      display: flex;
//      align-items: center;
//    }
// </style>
// 
// <aside class="demo-sidebar demo-left demo-description">
//  <h1 class="demo-sidebar-header">Description</h1>

fskpf

  graphComponent.graph.decorator.nodeDecorator.positionHandlerDecorator.setImplementationWrapper(
    (node, delegateHandler) => {
      // default position handler
      let positionHandler = delegateHandler

      // in this case the table node is just the parent node
      const tableNode = graphComponent.graph.getParent(node)

      if (tableNode) {
        const table = tableNode.lookup(ITable.$class)

fskpf

dfhdfgh

fskpf

fgd