Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

vue-shape teleport渲染问题 #2505

Closed
happy-mht opened this issue Aug 12, 2022 · 8 comments
Closed

vue-shape teleport渲染问题 #2505

happy-mht opened this issue Aug 12, 2022 · 8 comments

Comments

@happy-mht
Copy link

Describe the bug

使用teleport优化节点,但是一旦设置 node 的visible =false, 然后visible还原为true,此时,修改node的属性(比如移动位置,修改大小)不会触发视图刷新,好像是model层的变化不会被view层接收到了,希望这问题早点能解决。

Your Example Website or App

Steps to Reproduce the Bug or Issue

使用 @antv/x6-vue-shape useTeleport 方法渲染Node
给Node 设置 node.toggleVisible(false) 隐藏Node
然后 设置 node.toggleVisible(true) 显示Node
这个Node不能再移动(store 中记录的position 已经变化,但是视图没刷新)

Expected behavior

希望操作Node,能触发视图的刷新

Screenshots or Videos

No response

Platform

  • OS: [e.g. macOS, Windows, Linux]
  • Browser: [e.g. Chrome, Safari, Firefox]
  • Version: [e.g. 91.1]

windows

Additional context

No response

@x6-bot
Copy link
Contributor

x6-bot bot commented Aug 12, 2022

👋 @mht1993

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.

To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

@lloydzhou
Copy link
Contributor

应该是bug,周末修复一下

@happy-mht
Copy link
Author

感恩感恩

@lloydzhou
Copy link
Contributor

应该是设置visible=false的时候将当前这个cellview给remove了导致的问题
image

@happy-mht
Copy link
Author

happy-mht commented Aug 15, 2022

其实我感觉是teleport.ts 中没处理confirmUpdate逻辑导致的
下面是 vue-shape 中的view.ts

confirmUpdate(flag: number) {
    const ret = super.confirmUpdate(flag)
    return this.handleAction(ret, VueShapeView.action, () => {
      Scheduler.scheduleTask(() => {
        this.renderVueComponent() 
      })
    })
  }

而 teleport 中

 confirmUpdate(flag: any) {
        const ret = super.confirmUpdate(flag)
        return this.handleAction(ret, action, () => {
          // 这里无需做任何处理,但是,没有这个函数的时候,会卡死...
        })
      }

@lloydzhou
Copy link
Contributor

修复方案:

  1. 增加unmount函数(这个函数会从teleport的item列表删除对应的组件),View这个基类调用removeView的时候会自动调用
  2. confirmUpdate参照VueShapeView的模式增加renderVueComponent函数

@lloydzhou
Copy link
Contributor

@mht1993
这里基本上按照当前这个pr的修改,弄了一个在线的demo,模拟隐藏再显示的逻辑,应该是可以的
https://codesandbox.io/s/vue-shape-forked-gymtk4?file=/src/App.vue

@x6-bot
Copy link
Contributor

x6-bot bot commented Sep 2, 2023

This thread has been automatically locked because it has not had recent activity.

Please open a new issue for related bugs and link to relevant comments in this thread.

@x6-bot x6-bot bot locked as resolved and limited conversation to collaborators Sep 2, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants