🎨 https://github.com/siyuan-note/siyuan/issues/8341

app/src/layout/dock/index.ts

@@ -19,6 +19,8 @@ import {App} from "../../index";
 import {Plugin} from "../../plugin";
 import {Custom} from "./Custom";
 
+const TYPES = ["file", "outline", "inbox", "bookmark", "tag", "graph", "globalGraph", "backlink"];
+
 export class Dock {
     public element: HTMLElement;
     public layout: Layout;
@@ -63,7 +65,26 @@ export class Dock {
         this.position = options.position;
         this.pin = options.data.pin;
         this.data = {};
-        if (options.data.data.length === 0) {
+        let showDock = false
+        if (options.data.data.length !== 0) {
+            if (!showDock) {
+                options.data.data[0].find(item => {
+                    if (TYPES.includes(item.type)) {
+                        showDock = true
+                        return true
+                    }
+                })
+            }
+            if (!showDock) {
+                options.data.data[1].find(item => {
+                    if (TYPES.includes(item.type)) {
+                        showDock = true
+                        return true
+                    }
+                })
+            }
+        }
+        if (!showDock) {
             this.element.firstElementChild.innerHTML = `<span class="dock__item dock__item--pin b3-tooltips b3-tooltips__${this.getClassDirect(0)}" aria-label="${this.pin ? window.siyuan.languages.unpin : window.siyuan.languages.pin}">
     <svg><use xlink:href="#iconPin"></use></svg>
 </span>`;

app/src/layout/util.ts

@@ -37,6 +37,7 @@ import {Custom} from "./dock/Custom";
 import {newCardModel} from "../card/newCardTab";
 import {openRecentDocs} from "../business/openRecentDocs";
 import {App} from "../index";
+import {afterLoadPlugin} from "../plugin/loader";
 
 export const setPanelFocus = (element: Element) => {
     if (element.classList.contains("layout__tab--active") || element.classList.contains("layout__wnd--active")) {
@@ -239,55 +240,24 @@ export const exportLayout = (options: {
     });
 };
 
-const pushPluginDock = (app: App, dockItem: IDockTab[], position: TPluginDockPosition) => {
+const initInternalDock = (dockItem: IDockTab[]) => {
-    const needPushData: { [key: string]: IPluginDockTab } = {};
+    dockItem.forEach((existSubItem) => {
-    app.plugins.forEach((pluginItem) => {
-        let isExist = false;
-        dockItem.forEach(existSubItem => {
-            if (Object.keys(pluginItem.docks).includes(existSubItem.type)) {
-                isExist = true;
-            }
-        });
-        if (!isExist) {
-            Object.keys(pluginItem.docks).forEach(pluginDockKey => {
-                if (pluginItem.docks[pluginDockKey].config.position === position) {
-                    needPushData[pluginDockKey] = pluginItem.docks[pluginDockKey].config;
-                }
-            });
-        }
-    });
-    dockItem.forEach((existSubItem, index) => {
-        if (!["file", "outline", "inbox", "bookmark", "tag", "graph", "globalGraph", "backlink"].includes(existSubItem.type)) {
-            dockItem.splice(index, 1);
-            return;
-        }
         if (existSubItem.hotkeyLangId) {
             existSubItem.title = window.siyuan.languages[existSubItem.hotkeyLangId];
             existSubItem.hotkey = window.siyuan.config.keymap.general[existSubItem.hotkeyLangId].custom;
         }
     });
-    Object.keys(needPushData).forEach(key => {
-        const item = needPushData[key];
-        dockItem.push({
-            type: key,
-            size: item.size,
-            show: false,
-            icon: item.icon,
-            hotkey: item.hotkey || "",
-            title: item.title,
-        });
-    });
 };
 
 const JSONToDock = (json: any, app: App) => {
-    json.left.data.forEach((existItem: IDockTab[], index: number) => {
+    json.left.data.forEach((existItem: IDockTab[]) => {
-        pushPluginDock(app, existItem, index === 0 ? "LeftTop" : "LeftBottom");
+        initInternalDock(existItem);
     });
-    json.right.data.forEach((existItem: IDockTab[], index: number) => {
+    json.right.data.forEach((existItem: IDockTab[]) => {
-        pushPluginDock(app, existItem, index === 0 ? "RightTop" : "RightBottom");
+        initInternalDock(existItem);
     });
-    json.bottom.data.forEach((existItem: IDockTab[], index: number) => {
+    json.bottom.data.forEach((existItem: IDockTab[]) => {
-        pushPluginDock(app, existItem, index === 0 ? "BottomLeft" : "BottomRight");
+        initInternalDock(existItem);
     });
     window.siyuan.layout.centerLayout = window.siyuan.layout.layout.children[0].children[1] as Layout;
     window.siyuan.layout.leftDock = new Dock({position: "Left", data: json.left, app});
@@ -472,21 +442,8 @@ export const JSONToLayout = (app: App, isStart: boolean) => {
             });
         }
         app.plugins.forEach(item => {
-            try {
+            afterLoadPlugin(item);
-                item.onLayoutReady();
-            } catch (e) {
-                console.error(`plugin ${item.name} onLayoutReady error:`, e);
-            }
-
-            item.topBarIcons.forEach(element=> {
-                if (isMobile()) {
-                   document.querySelector("#menuAbout").after(element);
-                } else if (!isWindow()) {
-                    document.querySelector("#" + (element.getAttribute("data-position") === "right" ? "barSearch" : "drag")).before(element);
-                }
         });
-        });
-        // 等待 tab、dock 完成后再 init Tab model，dock
     }, Constants.TIMEOUT_LOAD);
 };
 

app/src/plugin/index.ts

@@ -72,7 +72,7 @@ export class Plugin {
             iconElement.setAttribute("data-menu", "true");
             iconElement.innerHTML = options.icon.startsWith("icon") ? `<svg><use xlink:href="#${options.icon}"></use></svg>` : options.icon;
             iconElement.addEventListener("click", options.callback);
-            iconElement.setAttribute("data-position", options.position );
+            iconElement.setAttribute("data-position", options.position);
         }
         this.topBarIcons.push(iconElement);
         return iconElement;

app/src/plugin/loader.ts

@@ -5,6 +5,7 @@ import {Plugin} from "./index";
 import {exportLayout} from "../layout/util";
 /// #endif
 import {API} from "./API";
+import {isMobile, isWindow} from "../util/functions";
 
 const getObject = (key: string) => {
     const api = {
@@ -64,6 +65,61 @@ const loadPluginJS = (app: App, item: IPluginData) => {
 
 export const loadPlugin = (app: App, item: IPluginData) => {
     const plugin = loadPluginJS(app, item);
+    const styleElement = document.createElement("style");
+    styleElement.textContent = item.css;
+    document.head.append(styleElement);
+    afterLoadPlugin(plugin);
+    /// #if !MOBILE
+    exportLayout({
+        reload: false,
+        onlyData: false,
+        errorExit: false
+    });
+    /// #endif
+};
+
+
+const updateDock = (dockItem: IDockTab[], index: number, plugin: Plugin, type: string) => {
+    const dockKeys = Object.keys(plugin.docks)
+    dockItem.forEach((tabItem: IDockTab, tabIndex: number) => {
+        if (dockKeys.includes(tabItem.type)) {
+            if (type === "Left") {
+                plugin.docks[tabItem.type].config.position = index === 0 ? "LeftTop" : "LeftBottom";
+            } else if (type === "Right") {
+                plugin.docks[tabItem.type].config.position = index === 0 ? "RightTop" : "RightBottom";
+            } else if (type === "Bottom") {
+                plugin.docks[tabItem.type].config.position = index === 0 ? "BottomLeft" : "BottomRight";
+            }
+            plugin.docks[tabItem.type].config.index = tabIndex;
+            plugin.docks[tabItem.type].config.size = tabItem.size;
+        }
+    })
+}
+
+export const afterLoadPlugin = (plugin: Plugin) => {
+    try {
+        plugin.onLayoutReady();
+    } catch (e) {
+        console.error(`plugin ${plugin.name} onLayoutReady error:`, e);
+    }
+
+    plugin.topBarIcons.forEach(element => {
+        if (isMobile()) {
+            document.querySelector("#menuAbout").after(element);
+        } else if (!isWindow()) {
+            document.querySelector("#" + (element.getAttribute("data-position") === "right" ? "barSearch" : "drag")).before(element);
+        }
+    });
+
+    window.siyuan.config.uiLayout.left.data.forEach((dockItem: IDockTab[], index: number) => {
+        updateDock(dockItem, index, plugin, "Left")
+    })
+    window.siyuan.config.uiLayout.right.data.forEach((dockItem: IDockTab[], index: number) => {
+        updateDock(dockItem, index, plugin, "Right")
+    })
+    window.siyuan.config.uiLayout.bottom.data.forEach((dockItem: IDockTab[], index: number) => {
+        updateDock(dockItem, index, plugin, "Bottom")
+    })
     Object.keys(plugin.docks).forEach(key => {
         const dock = plugin.docks[key];
         if (dock.config.position.startsWith("Left")) {
@@ -74,7 +130,7 @@ export const loadPlugin = (app: App, item: IPluginData) => {
                 icon: dock.config.icon,
                 title: dock.config.title,
                 hotkey: dock.config.hotkey
-            }], dock.config.position === "LeftBottom" ? 1 : 0, true);
+            }], dock.config.position === "LeftBottom" ? 1 : 0, dock.config.index);
         } else if (dock.config.position.startsWith("Bottom")) {
             window.siyuan.layout.bottomDock.genButton([{
                 type: key,
@@ -83,7 +139,7 @@ export const loadPlugin = (app: App, item: IPluginData) => {
                 icon: dock.config.icon,
                 title: dock.config.title,
                 hotkey: dock.config.hotkey
-            }], dock.config.position === "BottomRight" ? 1 : 0, true);
+            }], dock.config.position === "BottomRight" ? 1 : 0, dock.config.index);
         } else if (dock.config.position.startsWith("Right")) {
             window.siyuan.layout.rightDock.genButton([{
                 type: key,
@@ -92,17 +148,8 @@ export const loadPlugin = (app: App, item: IPluginData) => {
                 icon: dock.config.icon,
                 title: dock.config.title,
                 hotkey: dock.config.hotkey
-            }], dock.config.position === "RightBottom" ? 1 : 0, true);
+            }], dock.config.position === "RightBottom" ? 1 : 0, dock.config.index);
         }
     });
-    const styleElement = document.createElement("style");
+    // 等待 tab 完成后再 init Tab model
-    styleElement.textContent = item.css;
+}
-    document.head.append(styleElement);
-    /// #if !MOBILE
-    exportLayout({
-        reload: false,
-        onlyData: false,
-        errorExit: false
-    });
-    /// #endif
-};