Preparing v0.24.0

src/modules/features/Log/LogPane.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+    import { onDestroy, onMount } from "svelte";
+    import { logMessages } from "../../../lib/src/mock_and_interop/stores";
+    import type { ReactiveInstance } from "../../../lib/src/dataobject/reactive";
+    import { Logger } from "../../../lib/src/common/logger";
+
+    let unsubscribe: () => void;
+    let messages = [] as string[];
+    let wrapRight = false;
+    let autoScroll = true;
+    let suspended = false;
+    function updateLog(logs: ReactiveInstance<string[]>) {
+        const e = logs.value;
+        if (!suspended) {
+            messages = [...e];
+            setTimeout(() => {
+                if (scroll) scroll.scrollTop = scroll.scrollHeight;
+            }, 10);
+        }
+    }
+    onMount(async () => {
+        logMessages.onChanged(updateLog);
+        Logger("Log window opened");
+        unsubscribe = () => logMessages.offChanged(updateLog);
+    });
+    onDestroy(() => {
+        if (unsubscribe) unsubscribe();
+    });
+    let scroll: HTMLDivElement;
+</script>
+
+<div class="logpane">
+    <!-- <h1>Self-hosted LiveSync Log</h1> -->
+    <div class="control">
+        <div class="row">
+            <label><input type="checkbox" bind:checked={wrapRight} /><span>Wrap</span></label>
+            <label><input type="checkbox" bind:checked={autoScroll} /><span>Auto scroll</span></label>
+            <label><input type="checkbox" bind:checked={suspended} /><span>Pause</span></label>
+        </div>
+    </div>
+    <div class="log" bind:this={scroll}>
+        {#each messages as line}
+            <pre class:wrap-right={wrapRight}>{line}</pre>
+        {/each}
+    </div>
+</div>
+
+<style>
+    * {
+        box-sizing: border-box;
+    }
+    .logpane {
+        display: flex;
+        height: 100%;
+        flex-direction: column;
+    }
+    .log {
+        overflow-y: scroll;
+        user-select: text;
+        padding-bottom: 2em;
+    }
+    .log > pre {
+        margin: 0;
+    }
+    .log > pre.wrap-right {
+        word-break: break-all;
+        max-width: 100%;
+        width: 100%;
+        white-space: normal;
+    }
+    .row {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+    }
+    .row > label {
+        display: flex;
+        align-items: center;
+        min-width: 5em;
+        margin-right: 1em;
+    }
+</style>

src/modules/features/Log/LogPaneView.ts

@@ -0,0 +1,48 @@
+import {
+    ItemView,
+    WorkspaceLeaf
+} from "obsidian";
+import LogPaneComponent from "./LogPane.svelte";
+import type ObsidianLiveSyncPlugin from "../../../main.ts";
+export const VIEW_TYPE_LOG = "log-log";
+//Log view
+export class LogPaneView extends ItemView {
+
+    component?: LogPaneComponent;
+    plugin: ObsidianLiveSyncPlugin;
+    icon = "view-log";
+    title: string = "";
+    navigation = true;
+
+    getIcon(): string {
+        return "view-log";
+    }
+
+    constructor(leaf: WorkspaceLeaf, plugin: ObsidianLiveSyncPlugin) {
+        super(leaf);
+        this.plugin = plugin;
+    }
+
+
+    getViewType() {
+        return VIEW_TYPE_LOG;
+    }
+
+    getDisplayText() {
+        return "Self-hosted LiveSync Log";
+    }
+
+    async onOpen() {
+        this.component = new LogPaneComponent({
+            target: this.contentEl,
+            props: {
+            },
+        });
+        await Promise.resolve();
+    }
+
+    async onClose() {
+        this.component?.$destroy();
+        await Promise.resolve();
+    }
+}