feat(DockView): add TitleClass/TitleWidth parameter dotnetcore#3377 (d…

…otnetcore#3378)

* refactor: 删除宏定义

* fix: 修复客户端布局与服务器端布局不一致时导致 UI 不渲染问题

* feat: add TitleWidth 参数

* feat: 增加 TitleClass 参数

* feat: 支持设置 TitleWidht/TitleClass 参数

* refactor: 忽略序列化

* refactor: 移除 ShowClose 参数

* doc: 更新示例

* refactor: 增加忽略标记

* refactor: 增加已弃用标签

* refactor: 更改 ShowClose 参数为 IsClosable

* chore: bump version 8.0.9

* doc: 更新依赖包

* revert: 恢复点击 Stack 关闭不触发 TabClose 问题

* chore: bump version 8.1.0

* chore: 更新依赖包

* refactor: 使用 getState 方法

* refactor: 精简代码

* feat: 增加锁定按钮

* revert: 恢复 ShowClose 参数

* refactor: 重构代码

* revert: 撤销样式更新

* refactor: 增加 Stack 布局判断

* chore: bump version 8.1.1

src/Extensions/Components/BootstrapBlazor.Dock/BootstrapBlazor.Dock.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>8.0.8</Version>
+    <Version>8.1.1</Version>
   </PropertyGroup>
 
   <PropertyGroup>

src/Extensions/Components/BootstrapBlazor.Dock/Components/DockView/DockComponent.cs

@@ -25,15 +25,31 @@ public class DockComponent : DockComponentBase
     public string? Title { get; set; }
 
     /// <summary>
-    /// 获得/设置 组件 Class
+    /// 获得/设置 组件 Title 宽度 默认 null 未设置
     /// </summary>
     [Parameter]
+    [JsonIgnore]
+    public int? TitleWidth { get; set; }
+
+    /// <summary>
+    /// 获得/设置 组件 Title 样式 默认 null 未设置
+    /// </summary>
+    [Parameter]
+    [JsonIgnore]
+    public int? TitleClass { get; set; }
+
+    /// <summary>
+    /// 获得/设置 组件 Class 默认 null 未设置
+    /// </summary>
+    [Parameter]
+    [JsonIgnore]
     public string? Class { get; set; }
 
     /// <summary>
     /// 获得/设置 组件是否可见 默认 true 可见
     /// </summary>
     [Parameter]
+    [JsonIgnore]
     public bool Visible { get; set; } = true;
 
     /// <summary>
@@ -88,7 +104,7 @@ protected override void OnInitialized()
     {
         base.OnInitialized();
 
-        ComponentState = new { Id, ShowClose, Class, Key = Key ?? Title, Lock = IsLock };
+        ComponentState = new { Id, ShowClose, Class, Key = Key ?? Title, Lock = IsLock, TitleWidth, TitleClass };
         Type = DockContentType.Component;
     }
 

src/Extensions/Components/BootstrapBlazor.Dock/Components/DockView/DockView.razor.js

@@ -24,6 +24,39 @@ export async function init(id, option, invoke) {
     layout.on('initialised', () => {
         saveConfig(option, layout)
     })
+    layout.on('tabCreated', tab => {
+        var state = tab.contentItem.container.getState()
+        if (state.titleClass) {
+            tab.titleElement.classList.add(state.titleClass);
+        }
+        if (state.titleWidth) {
+            tab.titleElement.style.setProperty('width', `${state.titleWidth}px`);
+        }
+        if (state.showClose === false) {
+            tab.closeElement.classList.add('d-none');
+        }
+    });
+    layout.on('stackCreated', stack => {
+        const stackElement = stack.target;
+        var lockElement = document.createElement('div');
+        lockElement.classList = 'bb-dock-lock';
+        lockElement.title = 'lock/unlock';
+        lockElement.onclick = () => {
+            const lock = eventsData.has(stackElement)
+            if (lock) {
+                unLockStack(stackElement, dock)
+            }
+            else {
+                lockStack(stackElement, dock)
+            }
+
+            resetDockLock(dock)
+            stackElement.layoutManager.emit('lockChanged')
+        }
+        var dropdown = stackElement.header.controlsContainerElement.querySelector('.lm_tabdropdown');
+        dropdown.after(lockElement);
+        stackElement.lockElement = lockElement;
+    })
     layout.init()
 
     layout.on('tabClosed', (component, title) => {
@@ -163,9 +196,8 @@ const lockStack = (stack, dock) => {
     if (!eventsData.has(stack)) {
         eventsData.set(stack, stack)
 
-        const header = stack.header
-        header.controlsContainerElement.classList.add('bb-dock-lock')
-        header.tabs.forEach(tab => {
+        stack.lockElement.classList.add('lock')
+        stack.header.tabs.forEach(tab => {
             lockTab(tab, eventsData)
         })
     }
@@ -177,16 +209,15 @@ const unLockStack = (stack, dock) => {
     if (eventsData.has(stack)) {
         eventsData.delete(stack)
 
-        const header = stack.header
-        header.controlsContainerElement.classList.remove('bb-dock-lock')
-        header.tabs.forEach(tab => {
+        stack.lockElement.classList.remove('lock')
+        stack.header.tabs.forEach(tab => {
             unLockTab(tab, eventsData)
         })
     }
 }
 
 const resetDockLock = dock => {
-    const unlocks = dock.layout.getAllContentItems().filter(com => com.isComponent && !com.container.initialState.lock)
+    const unlocks = dock.layout.getAllContentItems().filter(com => com.isComponent && !com.container.getState().lock)
     const lock = unlocks.length === 0
     if (dock.lock !== lock) {
         dock.lock = lock
@@ -199,7 +230,7 @@ const lockTab = (tab, eventsData) => {
         tab.disableReorder()
         tab.onCloseClick = () => { }
         eventsData.set(tab, tab.onCloseClick)
-        tab.componentItem.container.initialState.lock = true
+        tab.componentItem.container.getState().lock = true
     }
 }
 
@@ -208,7 +239,7 @@ const unLockTab = (tab, eventsData) => {
         tab.enableReorder()
         tab.onCloseClick = eventsData.get(tab)
         eventsData.delete(tab)
-        tab.componentItem.container.initialState.lock = false
+        tab.componentItem.container.getState().lock = false
     }
 }
 
@@ -220,7 +251,7 @@ const toggleComponent = (dock, option) => {
     // gt 没有 items 有时添加
     items.forEach(v => {
         const c = comps.find(i => i.id === v.id)
-        if (c === undefined) {
+        if (c === void 0) {
             if (dock.layout.root.contentItems.length === 0) {
                 const componentItem = dock.layout.createAndInitContentItem({ type: option.content[0].type, content: [] }, dock.layout.root)
                 dock.layout.root.addChild(componentItem)
@@ -235,10 +266,13 @@ const toggleComponent = (dock, option) => {
                 rowOrColumn.updateSize()
             }
             else {
-                const stack = stacks.find(s => s.id == v.parent.id) || stacks.pop();
+                const stack = stacks.find(s => s.id == v.parent.id);
                 if (stack) {
                     stack.addItem(v);
                 }
+                else if (v.parent.type === 'stack' && stacks.length > 0) {
+                    stacks.pop().addItem(v);
+                }
                 else {
                     dock.layout.root.contentItems[0].addItem(v);
                 }
@@ -254,7 +288,7 @@ const toggleComponent = (dock, option) => {
     // gt 有 items 没有时移除
     comps.forEach(v => {
         const c = items.find(i => i.id === v.id)
-        if (c === undefined) {
+        if (c === void 0) {
             closeItem(dock.el, v)
         }
         else if (v.title !== c.title) {
@@ -353,7 +387,7 @@ const getConfig = option => {
                 close: 'close',
                 maximise: 'maximise',
                 minimise: 'minimise',
-                popout: 'lock/unlock'
+                popout: false
             }
         },
         ...option
@@ -433,17 +467,17 @@ const resetComponentId = (config, option) => {
         // 本地存储中没有，配置中有
         if (com === void 0) {
             if (config.root.content.length > 0) {
-                config.root.content.push({
-                    type: 'stack',
-                    content: [{
-                        type: 'component',
-                        content: [],
-                        title: item.title,
-                        id: item.id,
-                        componentType: 'component',
-                        componentState: item.componentState
-                    }]
-                });
+                if (config.root.type === 'stack' && config.root.content.length === 1 && option.content.length === 1) {
+                    config.root.type = option.content[0].type;
+                    config.root.content = option.content[0].content
+                }
+                else {
+                    config.root.content.push(createItem(item))
+                }
+            }
+            else {
+                config.root.type = option.content[0].type;
+                config.root.content = option.content[0].content;
             }
         }
     })
@@ -466,6 +500,15 @@ const resetComponentId = (config, option) => {
     });
 }
 
+const createItem = item => ({
+    type: 'component',
+    content: [],
+    title: item.title,
+    id: item.id,
+    componentType: 'component',
+    componentState: item.componentState
+});
+
 const findStack = (stack, stacks) => {
     let find = null;
     for (let com of stack.content) {
@@ -509,41 +552,13 @@ const hackGoldenLayout = dock => {
             this._layoutManager.emit('tabClosed', component, title)
         }
 
-        const originSetTitle = goldenLayout.Tab.prototype.setTitle
-        goldenLayout.Tab.prototype.setTitle = function (title) {
-            originSetTitle.call(this, title)
-            const showClose = this.contentItem.container.initialState.showClose
-            if (!showClose) {
-                this.closeElement.classList.add('d-none')
-            }
-        }
-
         // hack RowOrColumn
         const originSplitterDragStop = goldenLayout.RowOrColumn.prototype.onSplitterDragStop
         goldenLayout.RowOrColumn.prototype.onSplitterDragStop = function (splitter) {
             originSplitterDragStop.call(this, splitter)
             this.layoutManager.emit('splitterDragStop')
         }
 
-        // hack Header
-        goldenLayout.Header.prototype.handleButtonPopoutEvent = function () {
-            // find own dock
-            const dock = goldenLayout.bb_docks.find(i => i.layout === this.layoutManager);
-            const eventsData = dock.eventsData
-
-            const stack = this.parent
-            const lock = eventsData.has(stack)
-            if (lock) {
-                unLockStack(stack, dock)
-            }
-            else {
-                lockStack(stack, dock)
-            }
-
-            resetDockLock(dock)
-            this.layoutManager.emit('lockChanged')
-        }
-
         const originprocessTabDropdownActiveChanged = goldenLayout.Header.prototype.processTabDropdownActiveChanged
         goldenLayout.Header.prototype.processTabDropdownActiveChanged = function () {
             originprocessTabDropdownActiveChanged.call(this)

src/Extensions/Components/BootstrapBlazor.Dock/Converters/DockComponentConverter.cs

@@ -30,7 +30,6 @@ public override void Write(Utf8JsonWriter writer, List<IDockComponent> value, Js
         writer.WriteStartArray();
         foreach (var item in value)
         {
-#if NET6_0_OR_GREATER
             if (item is DockContent content)
             {
                 writer.WriteRawValue(JsonSerializer.Serialize(content, options));
@@ -42,7 +41,6 @@ public override void Write(Utf8JsonWriter writer, List<IDockComponent> value, Js
                     writer.WriteRawValue(JsonSerializer.Serialize(contentItem, options));
                 }
             }
-#endif
         }
         writer.WriteEndArray();
     }

src/Extensions/Components/BootstrapBlazor.Dock/wwwroot/css/goldenlayout-bb.css

@@ -48,10 +48,10 @@
             height: 20px;
         }
 
-    .bb-dock .lm_controls .lm_popout {
+    .bb-dock .lm_controls .bb-dock-lock {
         background-image: url(../images/unlock.svg);
     }
 
-    .bb-dock .lm_controls.bb-dock-lock .lm_popout {
-        background-image: url(../images/lock.svg);
-    }
+        .bb-dock .lm_controls .bb-dock-lock.lock {
+            background-image: url(../images/lock.svg);
+        }