Skip to content

Commit

Permalink
Migrate to n-split
Browse files Browse the repository at this point in the history
  • Loading branch information
xingrz committed Mar 23, 2024
1 parent ee918eb commit 23a2c9a
Show file tree
Hide file tree
Showing 3 changed files with 28 additions and 89 deletions.
43 changes: 24 additions & 19 deletions src/App.vue
Original file line number Diff line number Diff line change
@@ -1,45 +1,35 @@
<template>
<n-config-provider>
<resizable v-model:width="width">
<template v-slot:default>
<n-split direction="horizontal" :resize-trigger-size="8" v-model:size="editorStore.split">
<template #1>
<editor v-model:content="editorStore.content" v-model:selection="editorStore.selection"
v-model:scroll="editorStore.scroll" :icons="iconStore.icons" :size="editorStore.size" />
</template>
<template v-slot:fixed>
<template #2>
<scroller v-model:scroll="editorStore.scroll">
<BSMap :content="editorStore.content" :size="editorStore.size" />
</scroller>
</template>
</resizable>
<template #resize-trigger>
<div :class="$style.resizer">
</div>
</template>
</n-split>
</n-config-provider>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { NConfigProvider } from 'naive-ui';
import { NConfigProvider, NSplit } from 'naive-ui';
import { useEditorStore } from '@/stores/editor';
import { useIconStore } from '@/stores/icon';
import Resizable from './components/Resizable.vue';
import Scroller from './components/Scroller.vue';
import BSMap from './components/BSMap.vue';
import Editor from './components/Editor.vue';
const editorStore = useEditorStore();
const iconStore = useIconStore();
const width = computed({
get(): number {
const max = window.innerWidth - 200;
const min = 200;
const width = editorStore.width;
return Math.max(Math.min(width, max), min);
},
set(v: number) {
editorStore.width = v;
}
});
</script>

<style lang="scss" module>
Expand All @@ -49,4 +39,19 @@ const width = computed({
padding: 0;
overscroll-behavior-x: none;
}
.resizer {
height: 100vh;
background: #cccccc;
transition: background-color 200ms;
&:hover {
background: #d5d5d5;
}
&:active {
background: #c0c0c0;
}
}
</style>
66 changes: 0 additions & 66 deletions src/components/Resizable.vue

This file was deleted.

8 changes: 4 additions & 4 deletions src/stores/editor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const debouncedSetItem = debounce({ delay: 200 }, localStorage.setItem.bind(loca

export const useEditorStore = defineStore('editor', () => {
const size = ref(parseInt(localStorage.getItem('size') || '') || 20);
const width = ref(parseInt(localStorage.getItem('width') || '') || 200);
const split = ref(parseFloat(localStorage.getItem('split') || '') || 0.75);
const content = ref(localStorage.getItem('content') || '');
const scroll = ref(0);
const selection = ref<ISelection | null>(null);
Expand All @@ -17,8 +17,8 @@ export const useEditorStore = defineStore('editor', () => {
debouncedSetItem('size', String(value));
});

watch(width, (value) => {
debouncedSetItem('width', String(value));
watch(split, (value) => {
debouncedSetItem('split', String(value));
});

watch(content, (value) => {
Expand All @@ -27,7 +27,7 @@ export const useEditorStore = defineStore('editor', () => {

return {
size,
width,
split,
content,
scroll,
selection,
Expand Down

0 comments on commit 23a2c9a

Please sign in to comment.