Dev (#2)

* feat: svelte example for setting pannel

* Must destroy svelte

* onDestroy

* Make hello easy

* 拷贝官方的代码功能

* Use hello both in tab and dialog

* fix: destroy dock

src/index.ts

@@ -2,37 +2,205 @@
  * Copyright (c) 2023 frostime. All rights reserved.
  * https://github.com/frostime/sy-plugin-template-vite
  */
-import { Plugin, showMessage, Dialog } from "siyuan"
-import Hello from "./hello.svelte"
-import "./index.scss"
+import { Plugin, showMessage, confirm, Dialog, Menu, isMobile, openTab } from "siyuan";
+import "./index.scss";
+
+import HelloExample from "./hello.svelte";
+import DockExample from "./dock.svelte";
+import SettingPannel from "./libs/setting-panel.svelte";
+
+const STORAGE_NAME = "menu-config";
+const TAB_TYPE = "custom_tab";
+const DOCK_TYPE = "dock_tab";
 
 export default class SamplePlugin extends Plugin {
 
+    counter: { [key: string]: number } = {
+        hello: 0,
+    };
+    private customTab: () => any;
+
     async onload() {
-        console.log("onload");
-        showMessage("Hello World");
-        this.addTopBar(
-            {
-                icon: "iconEmoji",
-                "title": "Hello SiYuan",
-                "callback": () => {
-                    let dialog = new Dialog({
-                        title: "Hello World",
-                        content: `<div id="helloPanel"></div>`,
-                    });
-                    new Hello({
-                        target: dialog.element.querySelector("#helloPanel"),
-                        props: {
-                            name: this.i18n.name,
-                        }
-                    });
-                }
+        showMessage("Hello SiYuan Plugin");
+        console.log(this.i18n.helloPlugin);
+
+        const topBarElement = this.addTopBar({
+            icon: "iconEmoji",
+            title: this.i18n.addTopBarIcon,
+            position: "left",
+            callback: () => {
+                this.addMenu(topBarElement.getBoundingClientRect());
             }
-        )
+        });
+
+        let div = document.createElement("div");
+        new HelloExample({
+            target: div,
+            props: {
+                name: this.i18n.name,
+                i18n: this.i18n.hello
+            }
+        });
+        this.customTab = this.addTab({
+            type: TAB_TYPE,
+            init() {
+                this.element.appendChild(div);
+                console.log(this.element);
+            },
+            destroy() {
+                console.log("destroy tab:", TAB_TYPE);
+            }
+        });
+
+        this.addDock({
+            config: {
+                position: "LeftBottom",
+                size: { width: 200, height: 0 },
+                icon: "iconEmoji",
+                title: "Custom Dock",
+            },
+            data: {
+                text: "This is my custom dock"
+            },
+            type: DOCK_TYPE,
+            init() {
+                this.component = new DockExample({
+                    target: this.element,
+                    props: {
+                        text: this.data.text,
+                    }
+                });
+            },
+            destroy() {
+                console.log("destroy dock:", DOCK_TYPE);
+                this.component.$destroy();
+            }
+        });
+
+    }
+
+    private wsEvent({ detail }: any) {
+        console.log(detail);
+    }
+
+    private async addMenu(rect: DOMRect) {
+        const menu = new Menu("topBarSample", () => {
+            console.log(this.i18n.byeMenu);
+        });
+        menu.addItem({
+            icon: "iconHelp",
+            label: "Confirm",
+            click() {
+                confirm("Confirm", "Is this a confirm?", () => {
+                    showMessage("confirm");
+                }, () => {
+                    showMessage("cancel");
+                });
+            }
+        });
+        menu.addItem({
+            icon: "iconFeedback",
+            label: "Message",
+            click: () => {
+                showMessage(this.i18n.helloPlugin);
+            }
+        });
+        menu.addItem({
+            icon: "iconInfo",
+            label: "Dialog",
+            click: () => this.openHelloInDialog()
+        });
+        menu.addItem({
+            icon: "iconLayoutBottom",
+            label: "Open Tab",
+            click: () => {
+                openTab({
+                    custom: {
+                        icon: "iconEmoji",
+                        title: "Custom Tab",
+                        data: {
+                            text: "This is my custom tab",
+                        },
+                        fn: this.customTab
+                    },
+                });
+            }
+        });
+        menu.addItem({
+            icon: "iconTrashcan",
+            label: "Remove Data",
+            click: () => {
+                this.removeData(STORAGE_NAME);
+            }
+        });
+        menu.addItem({
+            icon: "iconSelect",
+            label: "On ws-main",
+            click: () => {
+                this.eventBus.on("ws-main", this.wsEvent);
+            }
+        });
+        menu.addItem({
+            icon: "iconClose",
+            label: "Off ws-main",
+            click: () => {
+                this.eventBus.off("ws-main", this.wsEvent);
+            }
+        });
+        menu.addSeparator();
+        menu.addItem({
+            icon: "iconSparkles",
+            label: this.data[STORAGE_NAME] || "Readonly",
+            type: "readonly",
+        });
+        if (isMobile()) {
+            menu.fullscreen();
+        } else {
+            menu.open({
+                x: rect.right,
+                y: rect.bottom,
+                isLeft: true,
+            });
+        }
+    }
+
+    openSetting(): void {
+        let dialog = new Dialog({
+            title: "SettingPannel",
+            content: `<div id="SettingPanel"></div>`,
+            width: "600px",
+            destroyCallback: (options) => {
+                console.log("destroyCallback", options);
+                //You must destroy the component when the dialog is closed
+                pannel.$destroy();
+            }
+        });
+        let pannel = new SettingPannel({
+            target: dialog.element.querySelector("#SettingPanel"),
+        });
+    }
+
+    private openHelloInDialog() {
+        this.counter.hello++;
+        let dialog = new Dialog({
+            title: "Hello World",
+            content: `<div id="helloPanel"></div>`,
+            destroyCallback(options) {
+                //You must destroy the component when the dialog is closed
+                hello.$destroy();
+            },
+        });
+        let hello = new HelloExample({
+            target: dialog.element.querySelector("#helloPanel"),
+            props: {
+                name: this.i18n.name,
+                i18n: this.i18n.hello
+            }
+        });
     }
 
     async onunload() {
-        showMessage("Goodbye World");
+        showMessage("Goodbye SiYuan Plugin");
         console.log("onunload");
     }
 }