antvis/G6

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'enableTick') #5013

sylvesterdas posted onGitHub

Describe the bug

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'enableTick')
    at LayoutController.eval (layout.js:134:1)
    at step (tslib.es6.mjs:147:1)
    at Object.eval [as next] (tslib.es6.mjs:128:1)
    at eval (tslib.es6.mjs:121:1)
    at new Promise (<anonymous>)
    at __awaiter (tslib.es6.mjs:117:1)
    at eval (layout.js:86:1)
    at new Promise (<anonymous>)
    at LayoutController.execLayoutMethod (layout.js:85:1)
    at LayoutController.eval (layout.js:298:1)

Your Example Website or App

https://kgp9rt.csb.app/

Steps to Reproduce the Bug or Issue

package.json

"dependencies": { "@antv/g6": "^4.8.19" ... }

package-lock.json

4.8.22

Vue 3 script

<template>
  <div class="relative h-[600px] rounded border z-0 overflow-hidden p-4" id="dep-graph"></div>
</template>

<script>
import G6 from '@antv/g6'
import { defineComponent } from 'vue'
import {
  legend,
  minimap,
  toolbar
} from '@/services/depGraphPlugins'

export default defineComponent({
  name: 'DependencyGraphV2',
  mounted() {
    const data = {
      nodes: [
        {
          id: 'node1',
          label: 'Circle1',
          x: 150,
          y: 150
        },
        {
          id: 'node2',
          label: 'Circle2',
          x: 400,
          y: 150
        }
      ],
      edges: [
        {
          source: 'node1',
          target: 'node2'
        }
      ]
    }

    const container = document.getElementById('dep-graph')
    const width = container.getBoundingClientRect().width
    const height = 540

    const graph = new G6.Graph({
      container: container.id,
      width: width,
      height: height,
      linkCenter: true,
      plugins: [legend, minimap(width), toolbar],
      modes: {
        default: [
          {
            type: 'collapse-expand',
            onChange: function onChange(item, collapsed) {
              const data = item.get('model')
              data.collapsed = collapsed
              return true
            }
          },
          'drag-canvas',
          'zoom-canvas'
        ]
      },
      defaultNode: {
        size: 26,
        anchorPoints: [
          [0, 0.5],
          [1, 0.5]
        ]
      },
      defaultEdge: {
        type: 'cubic-vertical'
      },
      layout: {
        type: 'dendrogram',
        direction: 'TB', // H / V / LR / RL / TB / BT
        nodeSep: 40,
        rankSep: 100
      }
    })

    graph.node(function(node) {
      let position = 'right'
      let rotate = 0
      if (!node.children) {
        position = 'bottom'
        rotate = Math.PI / 2
      }
      return {
        label: node.id,
        labelCfg: {
          position,
          offset: 5,
          style: {
            rotate,
            textAlign: 'start'
          }
        }
      }
    })

    graph.data(data)
    graph.render() // Throws the above bug here
    graph.fitView()

    if (typeof window !== 'undefined') {
      window.onresize = () => {
        if (!graph || graph.get('destroyed')) return
        if (!container || !container.scrollWidth || !container.scrollHeight) return
        graph.changeSize(container.scrollWidth, container.scrollHeight)
      }
    }
  }
})
</script>

Expected behavior

This was working few weeks back. It crashed on newer version

Screenshots or Videos

No response

Platform

  • OS: Ubuntu 24 LTS
  • Browser: Brave
  • Version: [4.8.19]

Additional context

No response


You are using a TreeGraph layout 'dendrogram' on Graph

posted by Yanyan-Wang over 1 year ago

Ah! Oops.

Thanks @Yanyan-Wang

posted by sylvesterdas over 1 year ago

Fund this Issue

$0.00
Funded

Pull requests