Little bit of transitioning for debug pages

core/src/index.ts

@@ -6,8 +6,9 @@ import PdfPipeline from './PdfPipeline';
 
 import AdjustHeight from './transformer/AdjustHeight';
 import CalculateCoordinates from './transformer/CalculateCoordinates';
+import CompactLines from './transformer/CompactLines';
 
-const transformers = [new AdjustHeight(), new CalculateCoordinates()];
+const transformers = [new AdjustHeight(), new CalculateCoordinates(), new CompactLines()];
 
 const defaultConfig: Config = {
   pdfjsParams: {

core/src/transformer/CompactLines.ts

@@ -0,0 +1,16 @@
+import Item from '../Item';
+import ItemResult from '../ItemResult';
+import ItemTransformer from './ItemTransformer';
+import TransformContext from './TransformContext';
+
+export default class CompactLines extends ItemTransformer {
+  constructor() {
+    super('Compact Lines', 'Combines items on the same y-axis', {
+      requireColumns: ['str', 'y'],
+    });
+  }
+
+  transform(_: TransformContext, items: Item[]): ItemResult {
+    return { items: items, messages: [] };
+  }
+}

ui/src/debug/DebugView.svelte

@@ -1,4 +1,5 @@
 <script>
+    import { fade, slide } from 'svelte/transition';
     import type Debugger from '@core/Debugger';
     import type Item from '@core/Item';
     import { Collection, BookOpen, ArrowLeft, ArrowRight } from 'svelte-hero-icons';
@@ -48,7 +49,7 @@
     <div class="controls py-2">
         <div class="flex items-center space-x-2">
             {#if pageFocus}
-                <span on:click={showAllPages}>
+                <span on:click={showAllPages} transition:slide>
                     <Collection size="1x" class="hover:text-green-700 cursor-pointer opacity-75" />
                 </span>
             {/if}
@@ -59,7 +60,9 @@
 
                 <!-- Page selection popup-->
                 {#if openedPageIndex}
-                    <div class="absolute mt-2 p-2 flex bg-gray-200 shadow-lg rounded-sm overflow-auto max-h-96">
+                    <div
+                        class="absolute mt-2 p-2 flex bg-gray-200 shadow-lg rounded-sm overflow-auto max-h-96"
+                        transition:slide>
                         <span class="mt-1 pr-2" on:click={showAllPages}>
                             <Collection size="1x" class="hover:text-green-700 cursor-pointer" />
                         </span>
@@ -91,9 +94,11 @@
     </div>
 
     <!-- Stage Messages -->
-    <ul class="list-disc list-inside mb-2 p-2 bg-yellow-100 rounded shadow text-sm">
+    <ul
+        class="messages list-disc list-inside mb-2 p-2 bg-yellow-100 rounded shadow text-sm"
+        style="max-height:{stageResult.messages.length * 40}px">
         {#each stageResult.messages as message}
-            <li>{message}</li>
+            <li in:slide={{ delay: 200 }} out:slide>{message}</li>
         {/each}
     </ul>
 
@@ -109,4 +114,7 @@
         top: 0;
         z-index: 3;
     }
+    .messages {
+        transition: max-height 0.15s ease-in-out;
+    }
 </style>

ui/src/debug/ItemTable.svelte

@@ -1,4 +1,5 @@
 <script>
+    import { scale } from 'svelte/transition';
     import type AnnotatedColumn from '@core/debug/AnnotatedColumn';
     import type Item from '@core/Item';
     import ColumnAnnotation from '../../../core/src/debug/ColumnAnnotation';
@@ -34,9 +35,10 @@
     <thead class=" ">
         <th />
         <th>#</th>
-        {#each schema as column}
+        {#each schema as column (column.name)}
             <th
-                class={column.annotation === ColumnAnnotation.ADDED ? 'text-green-600' : column.annotation === ColumnAnnotation.REMOVED ? 'text-red-600' : ''}>
+                transition:scale
+                class="{column.annotation === ColumnAnnotation.ADDED ? 'text-green-600' : column.annotation === ColumnAnnotation.REMOVED ? 'text-red-600' : ''} transition-colors duration-300 delay-200">
                 {column.name}
             </th>
         {/each}