Skip to content

Commit

Permalink
feat(schemas): scroll control
Browse files Browse the repository at this point in the history
  • Loading branch information
Novout committed May 20, 2023
1 parent c240365 commit 02892c1
Show file tree
Hide file tree
Showing 9 changed files with 315 additions and 382 deletions.
3 changes: 1 addition & 2 deletions packages/app/src/components/page/editor/main/EditorBase.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<template>
<div
id="entity-main"
ref="main"
class="flex flex-col wb-edit bg-theme-editor-background hover:bg-theme-editor-background-hover active:bg-theme-editor-background-active"
:class="[
Expand All @@ -12,7 +11,7 @@
]"
>
<EditorBaseRenderHistory v-if="EDITOR.configuration.topBar" />
<div class="flex flex-col mb-auto overflow-y-auto wb-scroll">
<div id="entity-main" class="flex flex-col mb-auto overflow-y-auto wb-scroll">
<EditorBaseRender v-if="PROJECT.base === 'chapter'" />
<EditorBaseSchemas v-else-if="PROJECT.base === 'annotations'" />
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,79 +1,25 @@
<template>
<section v-if="HISTORY.bar.length !== 0" class="flex z-50 wb-text items-center bg-theme-background-opacity-1 justify-between w-full">
<button v-for="(item, index) in HISTORY.bar" :key="index" :class="[HISTORY.barActive === item.id ? 'bg-theme-background-2' : 'hover:bg-theme-background-opacity-1']" class="flex-1 font-bold flex justify-around items-center font-raleway min-w-12 h-10 md:(h-9)" @click.prevent.stop="onLoad(item)">
<button v-for="(item, index) in HISTORY.bar" :key="index" :class="[HISTORY.barActive === item.id ? 'bg-theme-background-2' : 'hover:bg-theme-background-opacity-1']" class="flex-1 font-bold flex justify-around items-center font-raleway min-w-12 h-10 md:(h-9)" @click.prevent.stop="history.onLoad(item)">
<div class="flex gap-2 truncate pl-2">
<CustomIcon v-if="item.customIcon" :icon="item.customIcon" />
<p class="truncate">{{ item.name || item.id }}</p>
</div>
<button @click.prevent.stop="onDeleteBar(item)">
<button @click.prevent.stop="history.onDeleteBar(item)">
<IconClose class="w-6 h-6 wb-icon"/>
</button>
</button>
<button class="wb-icon ml-2" @click.prevent.stop="onCloseAll">
<button class="wb-icon ml-2" @click.prevent.stop="history.onCloseAll">
<IconCloseAll class="w-6 h-6" />
</button>
</section>
</template>

<script setup lang="ts">
import { useHistoryStore } from '@/store/history';
import { usePlugin } from 'better-write-plugin-core';
import { useSchemas } from '@/use/schemas'
import { HistoryStateBarItem } from 'better-write-types';
import { useGraph } from '@/use/graph';
import { useProjectStore } from '@/store/project';
import { useStorage } from '@/use/storage/storage';
import { useHistory } from '@/use/history'
const HISTORY = useHistoryStore()
const PROJECT = useProjectStore()
const plugin = usePlugin()
const schemas = useSchemas()
const graph = useGraph()
const storage = useStorage()
const onLoad = async (item?: HistoryStateBarItem) => {
await storage.normalize()
if(!item) item = HISTORY.bar.shift()
if(!item) return
if(item.type === 'annotations') {
const target = schemas.findFile(item.id)
if(!target) {
HISTORY.deleteBar(item)
return
}
plugin.emit('plugin-schemas-start', target)
HISTORY.barActive = target.id
return
}
const page = PROJECT.chapters.find(chapter => chapter.id === item?.id)
if(!page) {
HISTORY.deleteBar(item)
return
}
HISTORY.barActive = item.id
graph.load(item.id as number, page, page.entities[0], item.scrollHeight)
}
const onDeleteBar = (item: HistoryStateBarItem) => {
HISTORY.deleteBar(item)
onLoad()
}
const onCloseAll = () => {
HISTORY.bar = []
HISTORY.barActive = undefined
}
const history = useHistory()
</script>
19 changes: 13 additions & 6 deletions packages/app/src/store/history.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,11 @@ export const useHistoryStore = defineStore('history', {
}
},
actions: {
addBar(item: HistoryStateBarItem) {
const exists = this.bar.some(
({ id, type }) => item.id === id && type === item.type
)
updateScroll() {
const id = this.barActive

if (this.barActive) {
const prev = this.bar.find(({ id }) => id === this.barActive)
if (id) {
const prev = this.bar.find(({ id }) => id === id)

if (prev) {
const index = this.bar.indexOf(prev)
Expand All @@ -25,9 +23,18 @@ export const useHistoryStore = defineStore('history', {
document.querySelector('#entity-main')?.scrollTop ||
document.querySelector('#bw-wysiwyg')?.scrollTop

if (value === undefined) return

this.bar[index].scrollHeight = value || 0
}
}
},
addBar(item: HistoryStateBarItem) {
const exists = this.bar.some(
({ id, type }) => item.id === id && type === item.type
)

this.updateScroll()

this.barActive = item.id

Expand Down
11 changes: 8 additions & 3 deletions packages/app/src/use/graph.ts
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export const useGraph = () => {

await nextTick

if (scrollValue) {
if (scrollValue !== undefined) {
let el = document.querySelector('#entity-main')

if (!el) el = document.querySelector('#bw-wysiwyg')
Expand All @@ -73,12 +73,17 @@ export const useGraph = () => {
})
}

const to = async (index: ID<number>, page: ContextState, entity: Entity) => {
const to = async (
index: ID<number>,
page: ContextState,
entity: Entity,
scrollValue?: number
) => {
ABSOLUTE.spinner = true

await cycle.forceNextTick()

await load(index, page, entity)
await load(index, page, entity, scrollValue)

utils().mobile()

Expand Down
65 changes: 65 additions & 0 deletions packages/app/src/use/history.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import { useHistoryStore } from '@/store/history'
import { usePlugin } from 'better-write-plugin-core'
import { useSchemas } from '@/use/schemas'
import { HistoryStateBarItem } from 'better-write-types'
import { useGraph } from '@/use/graph'
import { useProjectStore } from '@/store/project'
import { useStorage } from '@/use/storage/storage'

export const useHistory = () => {
const HISTORY = useHistoryStore()
const PROJECT = useProjectStore()

const plugin = usePlugin()
const schemas = useSchemas()
const graph = useGraph()
const storage = useStorage()

const onLoad = async (item?: HistoryStateBarItem) => {
await storage.normalize()

if (!item) item = HISTORY.bar.shift()

if (!item) return

if (item.type === 'annotations') {
const target = schemas.findFile(item.id)

if (!target) {
HISTORY.deleteBar(item)

return
}

HISTORY.updateScroll()
plugin.emit('plugin-schemas-start', { target, item })
HISTORY.barActive = item.id

return
}

const page = PROJECT.chapters.find((chapter) => chapter.id === item?.id)

if (!page) {
HISTORY.deleteBar(item)

return
}

HISTORY.updateScroll()
await graph.to(item.id as number, page, page.entities[0], item.scrollHeight)
}

const onDeleteBar = (item: HistoryStateBarItem) => {
HISTORY.deleteBar(item)

onLoad()
}

const onCloseAll = () => {
HISTORY.bar = []
HISTORY.barActive = undefined
}

return { onDeleteBar, onCloseAll, onLoad }
}
2 changes: 1 addition & 1 deletion packages/app/src/use/schemas.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export const useSchemas = () => {
const onStart = (file: ProjectStateSchemaFile) => {
graph.utils().mobile()

plugin.emit('plugin-schemas-start', file)
plugin.emit('plugin-schemas-start', { target: file })
}

const onFileCreate = (folder: ProjectStateSchemaFolder) => {
Expand Down
4 changes: 2 additions & 2 deletions packages/plugin-core/src/on.ts
Original file line number Diff line number Diff line change
Expand Up @@ -392,10 +392,10 @@ export const externals = () => {
emitter: PluginTypes.PluginEmitter,
content: PluginTypes.PluginContentOn
) => {
emitter.on('plugin-schemas-start', (file: ProjectStateSchemaFile) => {
emitter.on('plugin-schemas-start', (obj) => {
const created = content[0]

created && created(file)
created && created(obj)
})
}

Expand Down
37 changes: 30 additions & 7 deletions packages/plugin-schemas/src/set.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import {
HistoryStateBarItem,
PluginTypes,
ProjectStateSchema,
ProjectStateSchemaFile,
Expand Down Expand Up @@ -160,7 +161,7 @@ export const PluginSchemasSet = (

if (!schema || schema?.folders?.length === 0)
createFile(stores.PROJECT.schemas[0].folders[0])
else if (schema.folders) start(schema.folders[0].files[0])
else if (schema.folders) start({ target: schema.folders[0].files[0] })
}
}

Expand Down Expand Up @@ -189,7 +190,13 @@ export const PluginSchemasSet = (
setActive()
}

const start = async (file: ProjectStateSchemaFile) => {
const start = async ({
target: file,
item,
}: {
target: ProjectStateSchemaFile
item?: HistoryStateBarItem
}) => {
reset()

stores.PROJECT.base = 'annotations'
Expand All @@ -199,7 +206,9 @@ export const PluginSchemasSet = (

const editor = await Editor.make()
.config((ctx) => {
ctx.set(rootCtx, document.querySelector('#bw-wysiwyg'))
const el = document.querySelector('#bw-wysiwyg')

ctx.set(rootCtx, el)

if (Object.keys(file.milkdownData).length !== 0) {
ctx.set(defaultValueCtx, {
Expand Down Expand Up @@ -240,12 +249,26 @@ export const PluginSchemasSet = (
.use(upload)
.create()

const el = document.querySelector('#bw-wysiwyg')

if (!item) {
const active = stores.HISTORY.barActive

if (active) {
const set = stores.HISTORY.bar.find(({ id }) => id === active)

if (set) item = set
}
}

if (el && item) el.scrollTop = item.scrollHeight

emitter.emit('plugin-schemas-get-instance', { editor, file })
}

On.externals().PluginSchemasStart(emitter, [
(file: ProjectStateSchemaFile) => {
start(file)
(obj: any) => {
start(obj)
},
() => {},
])
Expand All @@ -256,7 +279,7 @@ export const PluginSchemasSet = (

const file = await createFile(folder)

await start(file)
await start({ target: file })

hooks.emitter.emit('schemas-folder-graph-open', folder)
},
Expand All @@ -274,7 +297,7 @@ export const PluginSchemasSet = (
async (folder: ProjectStateSchemaFolder) => {
const file = await createFile(folder)

await start(file)
await start({ target: file })

hooks.emitter.emit('schemas-folder-graph-open', folder)
},
Expand Down
Loading

0 comments on commit 02892c1

Please sign in to comment.