mirror of
https://github.com/purocean/yn.git
synced 2026-09-24 15:46:02 +08:00
feat: add sync scroll control
This commit is contained in:
purocean
@@ -40,6 +40,7 @@ export default defineComponent({
|
||||
'eye-regular': '<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="eye" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="svg-inline--fa fa-eye fa-w-18"><path fill="currentColor" d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z" class=""></path></svg>',
|
||||
'text-width-solid': '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="text-width" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-text-width fa-w-14"><path fill="currentColor" d="M432 32H16A16 16 0 0 0 0 48v80a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-16h120v112h-24a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-24V112h120v16a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zm-68.69 260.69C354 283.36 336 288.36 336 304v48H112v-48c0-14.31-17.31-21.32-27.31-11.31l-80 80a16 16 0 0 0 0 22.62l80 80C94 484.64 112 479.64 112 464v-48h224v48c0 14.31 17.31 21.33 27.31 11.31l80-80a16 16 0 0 0 0-22.62z" class=""></path></svg>',
|
||||
'keyboard-solid': '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="keyboard" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="svg-inline--fa fa-keyboard fa-w-18"><path fill="currentColor" d="M528 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h480c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM128 180v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-336 96v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-336 96v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm288 0v-40c0-6.627-5.373-12-12-12H172c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h232c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12z" class=""></path></svg>',
|
||||
'columns-solid': '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="columns" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-columns fa-w-16"><path fill="currentColor" d="M464 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM224 416H64V160h160v256zm224 0H288V160h160v256z" class=""></path></svg>',
|
||||
}
|
||||
|
||||
const name = props.name!
|
||||
|
||||
@@ -46,6 +46,15 @@ export default {
|
||||
ctx.layout.toggleView()
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'btn',
|
||||
icon: 'columns-solid',
|
||||
title: ctx.i18n.t('control-center.switch.sync-scroll'),
|
||||
checked: ctx.store.state.syncScroll,
|
||||
onClick: () => {
|
||||
ctx.view.toggleSyncScroll()
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'btn',
|
||||
icon: 'paint-roller',
|
||||
|
||||
@@ -12,7 +12,7 @@ import { switchDoc } from './document'
|
||||
export type MenuItem = Components.ContextMenu.Item
|
||||
export type BuildContextMenu = (items: MenuItem[], e: MouseEvent) => void
|
||||
|
||||
let enableSyncScroll = true
|
||||
let tmpEnableSyncScroll = true
|
||||
let syncScrollTimer: any
|
||||
|
||||
const contextMenuFunList: BuildContextMenu[] = []
|
||||
@@ -172,8 +172,15 @@ export function exitPresent () {
|
||||
* @param flag
|
||||
*/
|
||||
export function toggleAutoPreview (flag?: boolean) {
|
||||
const showXterm = store.state.autoPreview
|
||||
store.commit('setAutoPreview', typeof flag === 'boolean' ? flag : !showXterm)
|
||||
store.commit('setAutoPreview', typeof flag === 'boolean' ? flag : !store.state.autoPreview)
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle sync scroll.
|
||||
* @param flag
|
||||
*/
|
||||
export function toggleSyncScroll (flag?: boolean) {
|
||||
store.commit('setSyncScroll', typeof flag === 'boolean' ? flag : !store.state.syncScroll)
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -204,7 +211,7 @@ export function getContextMenuItems (e: MouseEvent) {
|
||||
* @returns
|
||||
*/
|
||||
export function getEnableSyncScroll () {
|
||||
return enableSyncScroll
|
||||
return tmpEnableSyncScroll && store.state.syncScroll
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -214,10 +221,10 @@ export function getEnableSyncScroll () {
|
||||
*/
|
||||
export async function disableSyncScrollAwhile (fn: Function, timeout = 500) {
|
||||
clearTimeout(syncScrollTimer)
|
||||
enableSyncScroll = false
|
||||
tmpEnableSyncScroll = false
|
||||
await fn()
|
||||
syncScrollTimer = setTimeout(() => {
|
||||
enableSyncScroll = true
|
||||
tmpEnableSyncScroll = true
|
||||
}, timeout)
|
||||
}
|
||||
|
||||
|
||||
@@ -12,6 +12,7 @@ export const initState = {
|
||||
showEditor: storage.get('showEditor', true),
|
||||
showXterm: false,
|
||||
autoPreview: true,
|
||||
syncScroll: true,
|
||||
showSetting: false,
|
||||
showExport: false,
|
||||
showControlCenter: false,
|
||||
@@ -74,6 +75,9 @@ export default createStore({
|
||||
setIsFullscreen (state, data) {
|
||||
state.isFullscreen = data
|
||||
},
|
||||
setSyncScroll (state, data) {
|
||||
state.syncScroll = data
|
||||
},
|
||||
setAutoPreview (state, data) {
|
||||
state.autoPreview = data
|
||||
},
|
||||
|
||||
@@ -411,7 +411,8 @@ const data = {
|
||||
'side-bar': 'Side Bar %s',
|
||||
'editor': 'Editor %s',
|
||||
'view': 'Editor %s',
|
||||
'sync-rendering': 'Synchronous rendering',
|
||||
'sync-scroll': 'Synchronous Scrolling',
|
||||
'sync-rendering': 'Synchronous Rendering',
|
||||
'word-wrap': 'Word Wrap %s',
|
||||
'typewriter-mode': 'Typewriter Mode',
|
||||
},
|
||||
|
||||
@@ -412,6 +412,7 @@ const data: BaseLanguage = {
|
||||
'side-bar': '侧栏 %s',
|
||||
'editor': '编辑器 %s',
|
||||
'view': '预览 %s',
|
||||
'sync-scroll': '同步滚动',
|
||||
'sync-rendering': '同步渲染',
|
||||
'word-wrap': '编辑器换行 %s',
|
||||
'typewriter-mode': '打字机模式',
|
||||
|
||||
Reference in New Issue
Block a user