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

22
src/scripts/app.js
View File

@ -79,9 +79,11 @@ 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) }"
> >
<template x-if="ready">
<div class="flex items-center gap-x-1 mr-1 mt-1 absolute top-0 right-0 z-20 text-neutral-600"> <div class="flex items-center gap-x-1 mr-1 mt-1 absolute top-0 right-0 z-20 text-neutral-600">
<button x-show="expand" class="hover:text-red-500" @click="collapse()"> <button x-show="expand" class="hover:text-red-500" @click="collapse()">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
@ -99,6 +101,11 @@ export default () => ({
</svg> </svg>
</button> </button>
</div> </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;
} }