IssueHunt
Bug Bounty (New!)
Browse
Sign in with GitHub
antvis/G6

[Bug]: If the node type is "image", createEdge will give an error while creating. #6754

RackweLLizm posted onGitHub

Describe the bug / 问题描述

<html> <body> <!--StartFragment--><div class="console-message" style="box-sizing: border-box; min-width: 0px; min-height: 17px; clear: right; position: relative; padding: 3px 22px 1px 0px; margin-left: 24px; flex: 1 1 auto; display: flex; color: rgb(23, 29, 30); font-family: monospace; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(252, 235, 235); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div class="console-message-stack-trace-toggle" style="box-sizing: border-box; min-width: 0px; min-height: 0px; flex: 1 1 auto; display: flex; flex-direction: row; align-items: flex-start; margin-top: -1px;"><div class="console-message-stack-trace-wrapper" aria-label="rect.ts:72 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'src') at ImagePool2.getImageSync (rect.ts:72:51) at Canvas3.handleMounted2 (star.ts:39:19) at EventService2.notifyListeners (arc-2-cubic.ts:1037:25) at EventService2.notifyTarget (arc-2-cubic.ts:1007:10) at EventService2.propagate (arc-2-cubic.ts:682:12) at EventService2.dispatchEvent (arc-2-cubic.ts:641:12) at Image3.dispatchEvent (is-curve-array.ts:139:17) at Canvas3.mountChildren (animation.ts:674:19) at animation.ts:691:12 at Array.forEach (<anonymous>) Stack table expanded" style="box-sizing: border-box; min-width: 0px; min-height: 0px; --override-display-stack-preview-toggle-link: none; flex: 1 1 auto; display: flex; flex-direction: column; align-items: stretch;"><div aria-expanded="true" tabindex="-1" style="box-sizing: border-box; min-width: 0px; min-height: 0px; outline-width: 0px; flex: 0 0 auto;"><span class="source-code" style="box-sizing: border-box; min-width: 0px; min-height: 0px; font-family: var(--source-code-font-family); white-space: pre-wrap; font-size: var(--source-code-font-size) !important; line-height: 1.2;"><span class="console-message-anchor" style="box-sizing: border-box; min-width: 0px; min-height: 0px; float: right; text-align: right; max-width: 100%; margin-left: 4px;"><button class="devtools-link text-button link-style" jslog="Link; context: script-location; track: click" role="link" tabindex="-1" title="http://localhost/node_modules/@antv/g6/esm/elements/nodes/elements/nodes/rect.ts:72" style="box-sizing: border-box; min-width: 0px; min-height: 0px; font: inherit; margin: 0px; height: unset; border: none; border-radius: 2px; padding: 0px !important; color: var(--sys-color-primary); background: none; flex: 0 0 auto; white-space: nowrap; text-decoration: underline; outline-offset: 2px; outline: none; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; word-break: break-all;"><br class="Apple-interchange-newline">rect.ts:72</button> </span><span class="console-message-text" style="box-sizing: border-box; min-width: 0px; min-height: 0px; color: var(--override-error-text-color) !important;">Uncaught (in promise) <span class="object-value-error source-code" style="box-sizing: border-box; min-width: 0px; min-height: 0px; font-family: var(--source-code-font-family); white-space: pre-wrap; font-size: var(--source-code-font-size) !important; line-height: 1.2;"><span style="box-sizing: border-box; min-width: 0px; min-height: 0px;">TypeError: Cannot read properties of undefined (reading 'src') <span class="formatted-stack-frame" style="box-sizing: border-box; min-width: 0px; min-height: 0px;"> at ImagePool2.getImageSync (<button class="devtools-link text-button link-style" jslog="Link; context: script-location; track: click" role="link" tabindex="-1" title="http://localhost/node_modules/@antv/g6/esm/elements/nodes/elements/nodes/rect.ts:72:51" style="box-sizing: border-box; min-width: 0px; min-height: 0px; font: inherit; margin: 0px; height: unset; border: none; border-radius: 2px; padding: 0px !important; color: var(--sys-color-primary); background: none; flex: 0 0 auto; white-space: nowrap; text-decoration: underline; outline-offset: 2px; outline: none; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; word-break: break-all;">rect.ts:72:51</button>) </span><span class="formatted-stack-frame" style="box-sizing: border-box; min-width: 0px; min-height: 0px;"> at Canvas3.handleMounted2 (<button class="devtools-link text-button link-style" jslog="Link; context: script-location; track: click" role="link" tabindex="-1" title="http://localhost/node_modules/@antv/g6/esm/elements/nodes/elements/nodes/star.ts:39:19" style="box-sizing: border-box; min-width: 0px; min-height: 0px; font: inherit; margin: 0px; height: unset; border: none; border-radius: 2px; padding: 0px !important; color: var(--sys-color-primary); background: none; flex: 0 0 auto; white-space: nowrap; text-decoration: underline; outline-offset: 2px; outline: none; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; word-break: break-all;">star.ts:39:19</button>) </span><span class="formatted-stack-frame" style="box-sizing: border-box; min-width: 0px; min-height: 0px;"> at EventService2.notifyListeners (<button class="devtools-link text-button link-style" jslog="Link; context: script-location; track: click" role="link" tabindex="-1" title="http://localhost/node_modules/@antv/util/esm/path/process/path/process/arc-2-cubic.ts:1037:25" style="box-sizing: border-box; min-width: 0px; min-height: 0px; font: inherit; margin: 0px; height: unset; border: none; border-radius: 2px; padding: 0px !important; color: var(--sys-color-primary); background: none; flex: 0 0 auto; white-space: nowrap; text-decoration: underline; outline-offset: 2px; outline: none; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; word-break: break-all;">arc-2-cubic.ts:1037:25</button>) </span><span class="formatted-stack-frame" style="box-sizing: border-box; min-width: 0px; min-height: 0px;"> at EventService2.notifyTarget (<button class="devtools-link text-button link-style" jslog="Link; context: script-location; track: click" role="link" tabindex="-1" title="http://localhost/node_modules/@antv/util/esm/path/process/path/process/arc-2-cubic.ts:1007:10" style="box-sizing: border-box; min-width: 0px; min-height: 0px; font: inherit; margin: 0px; height: unset; border: none; border-radius: 2px; padding: 0px !important; color: var(--sys-color-primary); background: none; flex: 0 0 auto; white-space: nowrap; text-decoration: underline; outline-offset: 2px; outline: none; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; word-break: break-all;">arc-2-cubic.ts:1007:10</button>) </span><span class="formatted-stack-frame" style="box-sizing: border-box; min-width: 0px; min-height: 0px;"> at EventService2.propagate (<button class="devtools-link text-button link-style" jslog="Link; context: script-location; track: click" role="link" tabindex="-1" title="http://localhost/node_modules/@antv/util/esm/path/process/path/process/arc-2-cubic.ts:682:12" style="box-sizing: border-box; min-width: 0px; min-height: 0px; font: inherit; margin: 0px; height: unset; border: none; border-radius: 2px; padding: 0px !important; color: var(--sys-color-primary); background: none; flex: 0 0 auto; white-space: nowrap; text-decoration: underline; outline-offset: 2px; outline: none; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; word-break: break-all;">arc-2-cubic.ts:682:12</button>) </span><span class="formatted-stack-frame" style="box-sizing: border-box; min-width: 0px; min-height: 0px;"> at EventService2.dispatchEvent (<button class="devtools-link text-button link-style" jslog="Link; context: script-location; track: click" role="link" tabindex="-1" title="http://localhost/node_modules/@antv/util/esm/path/process/path/process/arc-2-cubic.ts:641:12" style="box-sizing: border-box; min-width: 0px; min-height: 0px; font: inherit; margin: 0px; height: unset; border: none; border-radius: 2px; padding: 0px !important; color: var(--sys-color-primary); background: none; flex: 0 0 auto; white-space: nowrap; text-decoration: underline; outline-offset: 2px; outline: none; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; word-break: break-all;">arc-2-cubic.ts:641:12</button>) </span><span class="formatted-stack-frame" style="box-sizing: border-box; min-width: 0px; min-height: 0px;"> at Image3.dispatchEvent (<button class="devtools-link text-button link-style" jslog="Link; context: script-location; track: click" role="link" tabindex="-1" title="http://localhost/node_modules/@antv/util/esm/path/util/path/util/is-curve-array.ts:139:17" style="box-sizing: border-box; min-width: 0px; min-height: 0px; font: inherit; margin: 0px; height: unset; border: none; border-radius: 2px; padding: 0px !important; color: var(--sys-color-primary); background: none; flex: 0 0 auto; white-space: nowrap; text-decoration: underline; outline-offset: 2px; outline: none; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; word-break: break-all;">is-curve-array.ts:139:17</button>) </span><span class="formatted-stack-frame" style="box-sizing: border-box; min-width: 0px; min-height: 0px;"> at Canvas3.mountChildren (<button class="devtools-link text-button link-style" jslog="Link; context: script-location; track: click" role="link" tabindex="-1" title="http://localhost/node_modules/@antv/g6/esm/constants/constants/animation.ts:674:19" style="box-sizing: border-box; min-width: 0px; min-height: 0px; font: inherit; margin: 0px; height: unset; border: none; border-radius: 2px; padding: 0px !important; color: var(--sys-color-primary); background: none; flex: 0 0 auto; white-space: nowrap; text-decoration: underline; outline-offset: 2px; outline: none; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; word-break: break-all;">animation.ts:674:19</button>) </span><span class="formatted-stack-frame" style="box-sizing: border-box; min-width: 0px; min-height: 0px;"> at <button class="devtools-link text-button link-style" jslog="Link; context: script-location; track: click" role="link" tabindex="-1" title="http://localhost/node_modules/@antv/g6/esm/constants/constants/animation.ts:691:12" style="box-sizing: border-box; min-width: 0px; min-height: 0px; font: inherit; margin: 0px; height: unset; border: none; border-radius: 2px; padding: 0px !important; color: var(--sys-color-primary); background: none; flex: 0 0 auto; white-space: nowrap; text-decoration: underline; outline-offset: 2px; outline: none; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; word-break: break-all;">animation.ts:691:12</button> </span> at Array.forEach (<anonymous>)</span></span></span></span></div><div class="" role="group" style="box-sizing: border-box; min-width: 0px; min-height: 0px; flex: 0 0 auto;"><span class="monospace stack-preview-container width-constrained" style="display: inline-block; --monospace-font-size: 12px; --monospace-font-family: monospace; --source-code-font-size: 12px; --source-code-font-family: monospace; width: 781.676px; box-sizing: border-box; min-width: 0px; min-height: 0px; font-family: var(--monospace-font-family); font-size: var(--monospace-font-size) !important;"> | getImageSync | @ | rect.ts:72 -- | -- | -- | -- | handleMounted2 | @ | star.ts:39 | notifyListeners | @ | arc-2-cubic.ts:1037 | notifyTarget | @ | arc-2-cubic.ts:1007 | propagate | @ | arc-2-cubic.ts:682 | dispatchEvent | @ | arc-2-cubic.ts:641 | dispatchEvent | @ | is-curve-array.ts:139 | mountChildren | @ | animation.ts:674 | (anonymous) | @ | animation.ts:691 | mountChildren | @ | animation.ts:690 | appendChild | @ | segment-arc-factory.ts:230 | createElement | @ | element.ts:435 | (anonymous) | @ | element.ts:474 | (anonymous) | @ | element.ts:474 | createElements | @ | element.ts:473 | draw | @ | element.ts:299 | (anonymous) | @ | create-edge.ts:156 | (anonymous) | @ | collapse-expand.ts:71 | __awaiter4 | @ | collapse-expand.ts:71 | handleCreateEdge | @ | create-edge.ts:117 | doEmit | @ | index.ts:69 | EventEmitter3.emit | @ | index.ts:73 | BehaviorController.forwardCanvasEvents | @ | behavior.ts:102 | notifyListeners | @ | arc-2-cubic.ts:1026 | notifyTarget | @ | arc-2-cubic.ts:1007 | propagate | @ | arc-2-cubic.ts:682 | dispatchEvent | @ | arc-2-cubic.ts:641 | EventService2.onPointerUp | @ | arc-2-cubic.ts:335 | mapEvent | @ | arc-2-cubic.ts:210 | (anonymous) | @ | polyline.ts:115 | (anonymous) | @ | torgb.ts:15 | call | @ | torgb.ts:13 | onPointerUp2 | @ | html.ts:30

</body> </html>

Reproduction link / 复现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

This error does not prevent the edge from being created. The edge is created, but when it fails, the animation of the edge does not work. In other words, the edge tip is not visible. After the edge is created, the edge becomes visible.

G6 Version / G6 版本

🆕 5.x

OS / 操作系统

  • macOS
  • Windows
  • Linux
  • Others / 其他

Browser / 浏览器

  • Chrome
  • Edge
  • Firefox
  • Safari (Limited support / 有限支持)
  • IE (Nonsupport / 不支持)
  • Others / 其他

It seems you are experiencing an issue with antvis/G6 when using nodes of type "image" and creating edges. The error message indicates a TypeError related to reading the 'src' property, which might be causing issues with edge animations.

Here's a general approach to troubleshoot and potentially resolve this issue:

  1. Ensure Image Source is Defined: Make sure that the image node has a valid 'src' property defined. This property should point to a valid image URL or path.

  2. Check Node Configuration: Verify that the node configuration for the image type is correctly set up in your G6 graph instance. Ensure all necessary properties are provided.

  3. Debugging: Use console logs or breakpoints to inspect the node properties and ensure that the 'src' is being correctly assigned before the edge creation.

  4. Update G6: Ensure you are using the latest version of G6, as updates may contain bug fixes for issues like this.

  5. Error Handling: Implement error handling around the edge creation logic to catch and manage errors gracefully.

If the issue persists, it might be beneficial to look into the specific lines of code mentioned in the error stack trace to understand where the undefined property is being accessed.

If you need further assistance or if this is a potential bug in the library, you might consider reporting it to the maintainers of the antvis/G6 repository, providing them with detailed information and a minimal reproducible example.

<details> <summary>🪧 Tips</summary> For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me. </details>

posted by petercat-assistant[bot] 3 months ago

@RackweLLizm Can you provide a reproducible demo?

posted by hustcc 2 months ago

@hustcc Since my project is very comprehensive, I can't give a demo, but I will make a video and show it here, including the console error.

posted by RackweLLizm 2 months ago

📝 To help us better understand and address your issue, please provide more information, or use the standard format, otherwise we will not process this issue.

Reference document:

📝 为了帮助我们更好地理解和解决你的问题，请提供更多信息，或者使用规范的格式，否则我们不会处理这个 issue。

参考文档：

posted by github-actions[bot] about 2 months ago

⚠️ This issue has been automatically closed due to inactivity.

  • If the issue is still relevant and important to you, feel free to:
    1. Reopen with additional information
    2. Create a new issue with updated context
    3. Reference any related issues or discussions

We close inactive issues to keep our backlog manageable and focused on active issues.

Your contribution makes our project better! 🌟

⚠️ 由于长期无活动，此 issue 已被自动关闭。

  • 如果这个问题对您来说仍然重要，您可以：
    1. 重新打开并提供补充信息
    2. 创建一个新的 issue 并更新相关背景
    3. 关联相关的 issue 或讨论

为了更好地维护项目，我们需要定期清理不活跃的问题。

感谢您为开源添砖加瓦！🌟

posted by github-actions[bot] about 1 month ago

Fund this Issue

$0.00
Funded

Pull requests

Company
AboutMission
Community
SpectrumEmbed
Support
FAQTerms of usePrivacy policyCode of conductCredits
Connect
FacebookTwitter

© 2019 BoostIO, Inc.