Collapse

src/lib/components/card/card.svelte

@@ -1,15 +1,21 @@
 <script lang="ts">
 	import { slide } from 'svelte/transition';
-	import Tabs from '$lib/components/tabs.svelte';
+	import Tabs from './tabs.svelte';
+	export let isCloseable: boolean = true;
 	export let isOpen: boolean = true;
 	export let tabs: Tab[] = [];
 	export let title: string;
+	$: {
+		console.log('a', isOpen);
+		isOpen = isCloseable ? isOpen : true;
+		console.log(isOpen);
+	}
 </script>
 
 <div class={`bg-white rounded overflow-hidden shadow m-2 flex-grow flex flex-col `}>
-	<div class="bg-blue-400 border-gray-400 p-2 flex-none">
+	<div class="bg-blue-400 border-gray-400 p-2 flex-none" on:click={() => (isOpen = !isOpen)}>
 		<div class="flex justify-between">
-			<Tabs on:select {tabs} bind:isOpen {title} />
+			<Tabs on:select {tabs} bind:isOpen {title} {isCloseable} />
 			<div class="flex gap-x-4 text-white">
 				<slot name="actions" />
 			</div>

src/lib/components/card/tabs.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
 	import { fade } from 'svelte/transition';
-
+	export let isCloseable: boolean = true;
 	export let tabs: Tab[] = [];
 	export let title: string;
 	export let isOpen = false;
@@ -16,7 +16,30 @@
 </script>
 
 <div class="flex">
-	<span class="text-white mr-2" on:click={() => (isOpen = !isOpen)}>{title}</span>
+	<span class="text-white mr-2" on:click|stopPropagation={() => (isOpen = !isOpen)}>
+		{#if isCloseable}
+			<svg
+				class="inline"
+				class:isOpen
+				xmlns="http://www.w3.org/2000/svg"
+				width="12"
+				height="7"
+				viewBox="0 0 12 7"
+				><defs
+					><style>
+						.cls-1 {
+							fill: #fff;
+							fill-rule: evenodd;
+						}
+					</style></defs
+				><path
+					class="cls-1"
+					d="M10.38.45,6,4.83,1.56.39h0A.84.84,0,0,0,.38,1.57h0l5,5h0a.83.83,0,0,0,.6.26H6a.83.83,0,0,0,.6-.26h0l5-5h0A.84.84,0,1,0,10.38.45Z"
+				/></svg
+			>
+		{/if}
+		{title}</span
+	>
 	{#if isOpen && tabs}
 		<ul class="flex list-none flex-wrap flex-row" transition:fade>
 			{#each tabs as tab}
@@ -36,3 +59,10 @@
 		</ul>
 	{/if}
 </div>
+
+<style>
+	.isOpen {
+		transform: rotate(-90deg);
+		transition-duration: 0.5s;
+	}
+</style>

src/lib/components/editor/editor.svelte

@@ -61,10 +61,7 @@
 				text: editor.getValue()
 			});
 		});
-		editor.layout({
-			height: divEl.parentElement.parentElement.offsetHeight,
-			width: divEl.parentElement.parentElement.offsetWidth
-		});
+
 		const resizeObserver = new ResizeObserver((entries) => {
 			editor.layout({
 				height: entries[0].contentRect.height,
@@ -72,7 +69,7 @@
 			});
 		});
 
-		resizeObserver.observe(divEl.parentElement.parentElement);
+		resizeObserver.observe(divEl.parentElement);
 		return () => {
 			editor.dispose();
 		};

src/lib/components/history/history.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import Tabs from '$lib/components/tabs.svelte';
-	import Card from '$lib/components/card.svelte';
+	import Card from '$lib/components/card/card.svelte';
 	import { codeStore, getStateString } from '$lib/util/state';
 	import {
 		addHistoryEntry,

src/lib/components/preset.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { updateCode } from '$lib/util/state';
-	import Card from '$lib/components/card.svelte';
+	import Card from '$lib/components/card/card.svelte';
 
 	const samples = {
 		'Flow Chart': `graph TD

src/routes/edit.svelte

@@ -3,16 +3,10 @@
 	import Navbar from '$lib/components/navbar.svelte';
 	import Preset from '$lib/components/preset.svelte';
 	import View from '$lib/components/view.svelte';
-	import Card from '$lib/components/card.svelte';
+	import Card from '$lib/components/card/card.svelte';
 	import History from '$lib/components/history/history.svelte';
-	import {
-		initURLSubscription,
-		updateCode,
-		updateConfig,
-		codeStore,
-		base64State
-	} from '$lib/util/state';
-	import { initHandler, loadStateFromURL } from '$lib/util/util';
+	import { updateCode, updateConfig, codeStore, base64State } from '$lib/util/state';
+	import { initHandler } from '$lib/util/util';
 	import { errorStore } from '$lib/util/error';
 	import { onMount } from 'svelte';
 	import type monaco from 'monaco-editor';
@@ -110,7 +104,7 @@
 	<Navbar />
 	<div class="flex-1 flex overflow-hidden">
 		<div class="w-2/5 flex flex-col">
-			<Card on:select={tabSelectHandler} {tabs} isOpen={true} title="Mermaid">
+			<Card on:select={tabSelectHandler} {tabs} isCloseable={false} title="Mermaid">
 				<div slot="actions">
 					{#if !$codeStore.autoSync}
 						<button class="bg-blue-500 hover:bg-blue-700 rounded px-1" on:click={syncDiagram}