Break27/sprachbund
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: graph state initialization

Browse Source
This commit is contained in:
Break27 2024-09-20 01:27:53 +08:00
parent 3300af85d9
commit 535b4d1cfd
2 changed files with 42 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/scripts/app.js
View File

@ -79,26 +79,33 @@ export default () => ({
:class="expand ? 'fixed flex size-full max-h-screen py-10 px-24 z-50' : '2xl:size-72 size-64'" :class="expand ? 'fixed flex size-full max-h-screen py-10 px-24 z-50' : '2xl:size-72 size-64'"
> >
<div class="relative rounded-md border size-full p-1 bg-white" <div class="relative rounded-md border size-full p-1 bg-white"
x-init="graph.value?.nodeType ? $el.appendChild(graph.value) : $el.innerHTML = graph.value" x-data="{ ready: false }"
x-init="if (graph.value?.nodeType) { ready = true; $el.appendChild(graph.value) }"
@click="if (expand && $el.children.length === 1) { destroy(); toggleGlobal(false) }" @click="if (expand && $el.children.length === 1) { destroy(); toggleGlobal(false) }"
> >
<div class="flex items-center gap-x-1 mr-1 mt-1 absolute top-0 right-0 z-20 text-neutral-600"> <template x-if="ready">
<button x-show="expand" class="hover:text-red-500" @click="collapse()"> <div class="flex items-center gap-x-1 mr-1 mt-1 absolute top-0 right-0 z-20 text-neutral-600">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5"> <button x-show="expand" class="hover:text-red-500" @click="collapse()">
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" /> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
</svg> <path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
</button> </svg>
<button x-show="!expand" class="hover:text-red-500" @click="expand = true; toggleGlobal(true)"> </button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-4"> <button x-show="!expand" class="hover:text-red-500" @click="expand = true; toggleGlobal(true)">
<path d="M13 4.5a2.5 2.5 0 1 1 .702 1.737L6.97 9.604a2.518 2.518 0 0 1 0 .792l6.733 3.367a2.5 2.5 0 1 1-.671 1.341l-6.733-3.367a2.5 2.5 0 1 1 0-3.475l6.733-3.366A2.52 2.52 0 0 1 13 4.5Z" /> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-4">
</svg> <path d="M13 4.5a2.5 2.5 0 1 1 .702 1.737L6.97 9.604a2.518 2.518 0 0 1 0 .792l6.733 3.367a2.5 2.5 0 1 1-.671 1.341l-6.733-3.367a2.5 2.5 0 1 1 0-3.475l6.733-3.366A2.52 2.52 0 0 1 13 4.5Z" />
</button> </svg>
<button x-show="!expand" class="hover:text-red-500" @click="expand = true"> </button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5"> <button x-show="!expand" class="hover:text-red-500" @click="expand = true">
<path fill-rule="evenodd" d="M5.22 14.78a.75.75 0 0 0 1.06 0l7.22-7.22v5.69a.75.75 0 0 0 1.5 0v-7.5a.75.75 0 0 0-.75-.75h-7.5a.75.75 0 0 0 0 1.5h5.69l-7.22 7.22a.75.75 0 0 0 0 1.06Z" clip-rule="evenodd" /> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
</svg> <path fill-rule="evenodd" d="M5.22 14.78a.75.75 0 0 0 1.06 0l7.22-7.22v5.69a.75.75 0 0 0 1.5 0v-7.5a.75.75 0 0 0-.75-.75h-7.5a.75.75 0 0 0 0 1.5h5.69l-7.22 7.22a.75.75 0 0 0 0 1.06Z" clip-rule="evenodd" />
</button> </svg>
</div> </button>
</div>
</template>
<template x-if="!ready">
<div x-html="graph.init()" class="size-full">
</div>
</template>
</div> </div>
<template x-if="expand"> <template x-if="expand">
<div class="absolute inset-0 size-full bg-neutral-400 opacity-25 -z-20" @click="collapse()"> <div class="absolute inset-0 size-full bg-neutral-400 opacity-25 -z-20" @click="collapse()">
@ -108,6 +115,17 @@ export default () => ({
`; `;
} }
init() {
return `
<div class="flex size-full justify-center items-center">
<svg class="animate-spin size-6 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</div>
`;
}
fail() { fail() {
return ` return `
<div class="flex size-full justify-center items-center"> <div class="flex size-full justify-center items-center">
@ -134,7 +152,7 @@ export default () => ({
const { Engine } = await import('./graph'); const { Engine } = await import('./graph');
let engine = Engine.fromIndex(this.index); let engine = Engine.fromIndex(this.index);
return engine.createInstance(); return engine.createInstance(url);
}); });
this.navigation.transition(() => { this.navigation.transition(() => {

6
src/scripts/graph.js
View File

@ -48,7 +48,7 @@ export class Engine {
return new Engine(graph); return new Engine(graph);
} }
createInstance() { createInstance(url) {
let settings = { allowInvalidContainer: true }; let settings = { allowInvalidContainer: true };
let container = document.createElement('div'); let container = document.createElement('div');
@ -59,6 +59,10 @@ export class Engine {
this.setupInteraction(); this.setupInteraction();
this.setupGraphStyle(); this.setupGraphStyle();
let camera = this.instance.getCamera();
router.emit('retrieve', { path: url });
camera.animate({ ratio: 1 }, { easing: "linear", duration: 200 });
return container; return container;
} }