fix: improve fullscreen mode #217
Conversation
|
|
||
| function toggleViewMode(mode: ViewMode) { | ||
| const newMode = mode ?? perViewMode | ||
| setTimeout(() => { |
There was a problem hiding this comment.
这里使用setTimeout是因为在eyedropper里close方法里会同时修改client和node中的frameState，这会赋给viewMode错误的值。暂时没找到合适的解决方法。所以在这里用了setTimeout。
There was a problem hiding this comment.
可以针对 eyeDropper 这种 viewMode 是 xs 的单独写一个判断逻辑
|
Hey @OneGIl , can you get my comments? Like this:
|
|
Hi~ @alexzhang1030 
|
|
@webfansplz Do you have any idea? And can you see my review comments? |
packages/node/src/views/FrameBox.vue
Outdated
| @@ -118,49 +116,49 @@ const viewModeClass = computed(() => { | |||
| > | |||
| <!-- Handlers --> | |||
| <div | |||
| v-show="state.position !== 'top'" | |||
| v-show="state.position !== 'top' && props.viewMode === 'default'" | |||
There was a problem hiding this comment.
Extracting props.viewMode === 'default' to a computed variable called ableToResize or something, which will be more maintainable.
There was a problem hiding this comment.
@alexzhang1030 got it~
| state.value.viewMode = value | ||
| }, | ||
| }) | ||
| let perViewMode = viewMode.value |
There was a problem hiding this comment.
preViewMode? Looks like a typo here.
|
|
||
| function toggleViewMode(mode: ViewMode) { | ||
| const newMode = mode ?? perViewMode | ||
| setTimeout(() => { |
There was a problem hiding this comment.
可以针对 eyeDropper 这种 viewMode 是 xs 的单独写一个判断逻辑
| router.replace(frameState.route.value) | ||
| router.replace(frameState.route.value).then(() => { | ||
| client.value?.panel?.toggleViewMode() | ||
| }) |
There was a problem hiding this comment.
这里无法通过同步的方式调用router.replace和toggleViewMode，否则就会设置成错误值。 也尝试在toggleViewMode方法中解决，可惜没找到好的方法。
"可能"的原因：
- 梳理了代码后发现
在client中的路由守卫会设置state的route值，而toggleViewMode方法也会改变state里的viewMode值。只不过这两个改变值的方式不同。在useObjectStorage中，前者通过useWindowEventListener方式监听localStorage并用新值覆盖hook中的state，而后者是用watch监听state并用新值覆盖localStorage。由于路由是异步的，处理速度上会比toggleViewMode慢一点（？），这将在设置route值的时候拿到了老的viewMode，最终赋值错误。 - 但上面的原因好像不能解释为什么用setTimeout就可以解决赋值错误的问题。
所以，我有一个不成熟的想法，不知道是否可行？就是在client端只通过client实例(useDevToolsClient)来获取state状态，以及修改state。而不是在client端使用useLocalStorage来获取state。
Kapture.2023-08-30.at.12.57.10.mp4