Fix view sorting problems (#975)

marcusolsson · Dec 1, 2024 · 5207cb7 · 5207cb7
1 parent 0d0ba55
commit 5207cb7
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 6 deletions.
diff --git a/src/ui/app/App.svelte b/src/ui/app/App.svelte
@@ -14,7 +14,11 @@
   import { OnboardingModal } from "./onboarding/onboardingModal";
   import View from "./View.svelte";
   import DataFrameProvider from "./DataFrameProvider.svelte";
-  import type { ProjectId, ViewId } from "src/settings/settings";
+  import type {
+    ProjectId,
+    ViewDefinition,
+    ViewId,
+  } from "src/settings/settings";
 
   export let projectId: ProjectId | undefined;
   export let viewId: ViewId | undefined;
@@ -29,8 +33,18 @@
     projects[0];
 
   $: views = project?.views || [];
+  $: views, viewId, setView();
 
-  $: view = views.find((view) => viewId === view.id) || views[0];
+  let view: ViewDefinition | undefined;
+  const setView = () => {
+    const t = views.find((view) => viewId === view.id);
+    if (!t) {
+      viewId = views[0]?.id;
+      view = views[0];
+    } else {
+      view = t;
+    }
+  };
 
   onMount(() => {
     if (!projects.length) {

diff --git a/src/ui/app/toolbar/ShadowViewItem.svelte b/src/ui/app/toolbar/ShadowViewItem.svelte
@@ -10,6 +10,11 @@
    */
   export let id: string;
 
+  /**
+   *  Specifies whether the button is active.
+   */
+  export let active: boolean = false;
+
   /**
    * Specifies an optional icon.
    */
@@ -21,7 +26,9 @@
     <Icon name={icon} />
   {/if}
   {label}
-  <IconButton icon="chevron-down" size="sm" nopadding />
+  {#if active}
+    <IconButton icon="chevron-down" size="sm" nopadding />
+  {/if}
 </div>
 
 <style>

diff --git a/src/ui/app/toolbar/ViewSelect.svelte b/src/ui/app/toolbar/ViewSelect.svelte
@@ -3,8 +3,11 @@
   import type { ViewDefinition, ViewId } from "src/settings/settings";
   import { Icon, Button, IconButton } from "obsidian-svelte";
   import { i18n } from "src/lib/stores/i18n";
-  import { dndzone, SHADOW_ITEM_MARKER_PROPERTY_NAME } from "svelte-dnd-action";
-
+  import {
+    dndzone,
+    TRIGGERS,
+    SHADOW_ITEM_MARKER_PROPERTY_NAME,
+  } from "svelte-dnd-action";
   import ViewItem from "./ViewItem.svelte";
   import ShadowViewItem from "./ShadowViewItem.svelte";
 
@@ -18,6 +21,8 @@
   export let onViewSort: (viewIds: ViewId[]) => void;
   export let viewExists: (name: string) => boolean;
 
+  let dragItem: ViewDefinition | undefined;
+
   function iconFromViewType(type: string) {
     return $customViews[type]?.getIcon() ?? "";
   }
@@ -27,6 +32,9 @@
   function handleDndConsider({
     detail,
   }: CustomEvent<DndEvent<ViewDefinition>>) {
+    if (detail.info.trigger === TRIGGERS.DRAG_STARTED) {
+      dragItem = views.find((v) => v.id === detail.info.id);
+    }
     views = detail.items;
   }
 
@@ -35,14 +43,20 @@
   }: CustomEvent<DndEvent<ViewDefinition>>) {
     views = detail.items;
     onViewSort(detail.items.map((i) => i.id));
+    if (detail.info.trigger === TRIGGERS.DROPPED_INTO_ZONE) {
+      dragItem = views.find((v) => v.id === detail.info.id);
+    }
+    if (dragItem) {
+      dragItem = undefined;
+    }
   }
 
   function transformDraggedElement(draggedEl: HTMLElement | undefined) {
     if (draggedEl) draggedEl.empty();
   }
 
   function isShadowItem(view: ViewDefinition) {
-    //@ts-ignore
+    // @ts-ignore
     return view[SHADOW_ITEM_MARKER_PROPERTY_NAME];
   }
 </script>
@@ -58,6 +72,7 @@
       },
       morphDisabled: false,
       transformDraggedElement,
+      // centreDraggedOnCursor: true,
     }}
     on:consider={handleDndConsider}
     on:finalize={handleDndFinalize}
@@ -94,6 +109,7 @@
         <div>
           <ShadowViewItem
             id={v.id}
+            active={dragItem?.id === viewId}
             label={v.name}
             icon={iconFromViewType(v.type)}
           />