adjust zoom for big ones and changer search behaviour

zazuko · Feb 7, 2025 · 001f7ba · 001f7ba
1 parent 1b60829
commit 001f7ba
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 65 deletions.
diff --git a/src-vscode/package-lock.json b/src-vscode/package-lock.json
diff --git a/src/App.vue b/src/App.vue
@@ -50,6 +50,15 @@ function makeEditorBig() {
 
 function toggleSearch () {
   showSearchPanel.value = !showSearchPanel.value;
+  if (showSearchPanel.value) {
+    hideEditorSplitterPanel.value = true;
+    window.setTimeout(() => {
+      fitView({
+        duration: 1000, // use this if you want a smooth transition to the node
+        padding: 0.3 // use this for some padding around the node
+      })
+    })
+  }
 }
 
 function onFormatChange(rdfSerializationType: RdfSerializationType) {
@@ -102,7 +111,7 @@ function onNdeSelected(term: Term) {
     </template>
   </Toolbar>
 
-  <Splitter style="height: calc(100vh - (67.5px + ( 2 * 8px) + 8px) ); margin-top: 8px" class="mb-8">
+  <Splitter :style="{ height: showSearchPanel ? 'calc(60vh - (67.5px + ( 2 * 8px) + 8px) )' : 'calc(100vh - (67.5px + ( 2 * 8px) + 8px) )' }" style="margin-top: 8px;" class="mb-8">
 
     <SplitterPanel :style="{ display: hideEditorSplitterPanel ? 'none' : 'flex' }" class="flex items-center justify-center">
       <RdfEditor :format="currentSerialization" @change="onQuadsChanged" @format-change="onFormatChange"/>

diff --git a/src/components/GraphView.vue b/src/components/GraphView.vue
@@ -1,6 +1,6 @@
 <template>
     <div style="height: 100%; width:100%">
-    <VueFlow :nodes="nodes" :edges="edges" :min-zoom="0.05" :max-zoom="10" @node-drag="onNodeDrag" @edge-click="zoomToNode" >
+    <VueFlow :nodes="nodes" :edges="edges" :min-zoom="0.00005" :max-zoom="10" @node-drag="onNodeDrag" @edge-click="zoomToNode" >
 
       <template #node-custom="customNodeProps">
       <ResourceNode v-bind="customNodeProps" />

diff --git a/vscode/index.html b/vscode/index.html
@@ -340,7 +340,7 @@
 
 		setTimeout(() => {
 			const evtMessage = {
-				rdfString: shortTTL,
+				rdfString: longTTL,
 				contentType: "text/turtle"
 			}
 			const event = new CustomEvent('sketch.updateContent', { detail: evtMessage });