From b07a90106c2e4934d5eee21f287a294f993fbc26 Mon Sep 17 00:00:00 2001 From: purocean Date: Mon, 8 Nov 2021 22:39:56 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=B8=B2=E6=9F=93?= =?UTF-8?q?=E5=88=B7=E6=96=B0=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/renderer/components/Preview.vue | 17 ++++++++++++++--- src/renderer/plugins/status-bar-refresh.ts | 10 +++++++--- src/renderer/services/layout.ts | 6 +++++- src/renderer/services/view.ts | 9 +++++++++ src/renderer/support/embed.ts | 13 ++++++++++++- src/renderer/types.ts | 1 + 6 files changed, 48 insertions(+), 8 deletions(-) diff --git a/src/renderer/components/Preview.vue b/src/renderer/components/Preview.vue index 09303e0b..aa47e664 100644 --- a/src/renderer/components/Preview.vue +++ b/src/renderer/components/Preview.vue @@ -50,6 +50,8 @@ import { useBus } from '@fe/core/bus' import { registerAction, removeAction } from '@fe/core/action' import { revealLineInCenter } from '@fe/services/editor' import { showExport } from '@fe/services/document' +import { toggleAutoPreview } from '@fe/services/view' +import { getLogger } from '@fe/utils' import Render from './Render.vue' import SvgIcon from './SvgIcon.vue' @@ -57,6 +59,8 @@ import 'github-markdown-css/github-markdown.css' import 'highlight.js/styles/atom-one-dark.css' import 'katex/dist/katex.min.css' +const logger = getLogger('preview') + export default defineComponent({ name: 'xview', components: { Render, SvgIcon }, @@ -137,6 +141,7 @@ export default defineComponent({ } function render () { + logger.debug('render') // 编辑非 markdown 文件预览直接显示代码 const content = (filePath.value || '').endsWith('.md') ? currentContent.value @@ -201,10 +206,16 @@ export default defineComponent({ return refView.value?.outerHTML || '' } + function refresh () { + logger.debug('refresh') + renderDebonce() + triggerHook('ON_VIEW_REFRESH', { getViewDom }) + } + onMounted(() => { nextTick(renderDebonce) triggerHook('ON_VIEW_MOUNTED', { getViewDom }) - registerAction({ name: 'view.refresh', handler: render }) + registerAction({ name: 'view.refresh', handler: refresh }) registerAction({ name: 'view.reveal-line', handler: revealLine }) registerAction({ name: 'view.scroll-top-to', handler: scrollTopTo }) registerAction({ name: 'view.get-content-html', handler: getContentHtml }) @@ -222,10 +233,10 @@ export default defineComponent({ bus.off('global.resize', resizeHandler) }) - watch(currentContent, () => autoPreview.value && renderDebonce()) + watch(() => currentContent.value + filePath.value, () => autoPreview.value && renderDebonce()) watch(filePath, () => { // 切换文件后，开启自动预览 - store.commit('setAutoPreview', true) + toggleAutoPreview(true) triggerHook('ON_VIEW_FILE_CHANGE', { getViewDom }) }) diff --git a/src/renderer/plugins/status-bar-refresh.ts b/src/renderer/plugins/status-bar-refresh.ts index ca7263df..4de54f6e 100644 --- a/src/renderer/plugins/status-bar-refresh.ts +++ b/src/renderer/plugins/status-bar-refresh.ts @@ -1,6 +1,5 @@ import { Plugin } from '@fe/context' import store from '@fe/support/store' -import { getActionHandler } from '@fe/core/action' export default { name: 'status-bar-refresh', @@ -11,7 +10,12 @@ export default { id: 'status-bar-refresh-status', position: 'right', title: '同步渲染-' + (autoPreview ? '已开启' : '已关闭'), - onClick: () => store.commit('setAutoPreview', !autoPreview) + onClick: () => { + ctx.view.toggleAutoPreview() + if (!autoPreview) { + ctx.view.refresh() + } + }, } menus['status-bar-refresh-action'] = { @@ -20,7 +24,7 @@ export default { tips: '强制渲染', icon: 'sync-alt-solid', hidden: autoPreview, - onClick: () => getActionHandler('view.refresh')() + onClick: () => ctx.view.refresh() } }) diff --git a/src/renderer/services/layout.ts b/src/renderer/services/layout.ts index 2669789a..cd72a12a 100644 --- a/src/renderer/services/layout.ts +++ b/src/renderer/services/layout.ts @@ -3,6 +3,7 @@ import store from '@fe/support/store' import { useBus } from '@fe/core/bus' import { getActionHandler, registerAction } from '../core/action' import { Alt } from '../core/command' +import * as view from './view' const bus = useBus() @@ -27,7 +28,10 @@ export function toggleSide (visible?: boolean) { * @param visible 是否展示 */ export function toggleView (visible?: boolean) { - store.commit('setShowView', typeof visible === 'boolean' ? visible : !store.state.showView) + const val = typeof visible === 'boolean' ? visible : !store.state.showView + val && nextTick(view.refresh) + + store.commit('setShowView', val) store.commit('setShowEditor', true) emitResize() } diff --git a/src/renderer/services/view.ts b/src/renderer/services/view.ts index 65f8e68e..1236215f 100644 --- a/src/renderer/services/view.ts +++ b/src/renderer/services/view.ts @@ -59,6 +59,15 @@ export function exitPresent () { getActionHandler('view.exit-presentation')() } +/** + * 切换自动预览刷新 + * @param flag 是否开启自动刷新预览 + */ +export function toggleAutoPreview (flag?: boolean) { + const showXterm = store.state.autoPreview + store.commit('setAutoPreview', typeof flag === 'boolean' ? flag : !showXterm) +} + registerAction({ name: 'view.enter-presentation', handler: () => present(true), diff --git a/src/renderer/support/embed.ts b/src/renderer/support/embed.ts index 1b6c6639..fe3b442c 100644 --- a/src/renderer/support/embed.ts +++ b/src/renderer/support/embed.ts @@ -1,7 +1,8 @@ import { debounce } from 'lodash-es' -import { defineComponent, h, IframeHTMLAttributes, onBeforeMount, onBeforeUnmount, PropType, ref, watch } from 'vue' +import { defineComponent, h, IframeHTMLAttributes, nextTick, onBeforeMount, onBeforeUnmount, PropType, ref, watch } from 'vue' import { useBus } from '@fe/core/bus' import { md5 } from '@fe/utils' +import { registerHook, removeHook } from '@fe/core/plugin' /** * 构建一个嵌入页面的 src 路径 @@ -51,11 +52,21 @@ export const IFrame = defineComponent({ } } + const refresh = () => { + url.value = '' + nextTick(update) + } + const bus = useBus() bus.on('theme.change', changeTheme) + registerHook('ON_VIEW_REFRESH', refresh) + registerHook('ON_VIEW_FILE_CHANGE', refresh) + onBeforeUnmount(() => { bus.off('theme.change', changeTheme) + removeHook('ON_VIEW_REFRESH', refresh) + removeHook('ON_VIEW_FILE_CHANGE', refresh) }) const onLoad = function () { diff --git a/src/renderer/types.ts b/src/renderer/types.ts index 17b8c1bb..7b4a5678 100644 --- a/src/renderer/types.ts +++ b/src/renderer/types.ts @@ -121,6 +121,7 @@ export type BuildInHookTypes = { ON_VIEW_RENDERED: [{ getViewDom: ()=> HTMLElement | null }], ON_VIEW_MOUNTED: [{ getViewDom: ()=> HTMLElement | null }], ON_VIEW_FILE_CHANGE: [{ getViewDom: ()=> HTMLElement | null }], + ON_VIEW_REFRESH: [{ getViewDom: ()=> HTMLElement | null }], ON_TREE_NODE_SELECT: [Components.Tree.Node], ON_DOC_BEFORE_EXPORT: [], }