https://www.blazor.zone/_content/BootstrapBlazor.Dock/js/golden-layout-extensions.08hajzgocn.js

1import "./golden-layout.js"
2import { getAllItemsByType } from "./golden-layout-utility.js"
3
4goldenLayout.Tab.prototype.onCloseClick = function () {
5    const component = document.getElementById(this.componentItem.id)
6    const title = this.componentItem.title
7
8    this.notifyClose();
9    this._layoutManager.emit('tabClosed', component, title)
10};
11
12const originSplitterDragStop = goldenLayout.RowOrColumn.prototype.onSplitterDragStop;
13goldenLayout.RowOrColumn.prototype.onSplitterDragStop = function (splitter) {
14    originSplitterDragStop.call(this, splitter)
15    this.layoutManager.emit('splitterDragStop')
16};
17
18const originprocessTabDropdownActiveChanged = goldenLayout.Header.prototype.processTabDropdownActiveChanged;
19goldenLayout.Header.prototype.processTabDropdownActiveChanged = function () {
20    originprocessTabDropdownActiveChanged.call(this)
21
22    this._closeButton.onClick = function (ev) {
23        // find own dock
24        const dock = goldenLayout.bb_docks.find(i => i.layout === this._header.layoutManager);
25        const eventsData = dock.eventsData
26
27        const tabs = this._header.tabs.map(tab => {
28            return { element: tab.componentItem.element, title: tab.componentItem.title }
29        })
30        if (!eventsData.has(this._header.parent)) {
31            this._pushEvent(ev)
32
33            const handler = setTimeout(() => {
34                clearTimeout(handler)

35                tabs.forEach(tab => {
36                    this._header.layoutManager.emit('tabClosed', tab.element, tab.title)
37                })
38            }, 100)
39        }
40    }
41};
42
43const createDock = (el, option) => {
44    const config = getConfig(option)
45
46    if (option.lock) {
47        getAllItemsByType('component', option).forEach(i => {
48            i.componentState.lock = option.lock
49        })
50    }
51
52    const layout = new goldenLayout.GoldenLayout(config, el)
53
54    layout.registerComponentFactoryFunction("component", (container, state) => {
55        const el = document.getElementById(state.id)
56        if (el) {
57            el.classList.remove('d-none')
58            if (state.class) {
59                container.element.classList.add(state.class)
60            }
61            container.element.append(el)
62        }
63    })
64    layout.resizeWithContainerAutomatically = true
65    return layout
66}
67
68const getConfig = option => {
69    option = {
70        enableLocalStorage: false,
71        layoutConfig: null,
72        name: 'default',
73        ...option
74    }
75
76    let config = null
77    let layoutConfig = option.layoutConfig;
78    if (layoutConfig === null && option.enableLocalStorage) {
79        layoutConfig = localStorage.getItem(option.localStorageKey);
80    }
81    if (layoutConfig) {
82        // 当tab全部关闭时，没有root节点
83        const configItem = JSON.parse(layoutConfig)
84        if (configItem.root) {
85            config = configItem
86            resetComponentId(config, option)
87        }
88    }
89
90    return {
91        ...(config || { content: [] }),
92        ...{
93            dimensions: {
94                borderWidth: 5,
95                minItemHeight: 10,
96                minItemWidth: 10,
97                headerHeight: 25
98            },
99            labels: {
100                close: 'close',
101                maximise: 'maximise',
102                minimise: 'minimise',
103                popout: false
104            }
105        },
106        ...option
107    }
108}
109
110const resetComponentId = (config, option) => {
111    // 本地配置
112    const localComponents = getAllItemsByType('component', config.root)
113    // 服务器端配置
114    const serverItems = getAllItemsByType('component', option)
115    localComponents.forEach(com => {
116        const item = serverItems.find(i => i.componentState.key === com.componentState.key)
117        if (item) {
118            com.id = item.id
119            com.title = item.title
120            com.componentState = item.componentState
121            com.componentState.lock = com.componentState.lock || item.componentState.lock
122        }
123        else {
124            // 本地存储中有，配置中没有，需要显示这个组件，通过 key 来定位新 Component
125            const newEl = document.querySelector(`[data-bb-key='${com.componentState.key}']`) || document.querySelector(`[data-bb-title='${com.componentState.key}']`)
126            if (newEl) {
127                com.id = newEl.getAttribute('id')
128                com.title = newEl.getAttribute('data-bb-title')
129                com.componentState.id = com.id
130
131                option.invokeVisibleChangedCallback(com.title, true)
132            }
133            else {
134                removeContent(config.root.content, com)
135
136                // remove empty stack
137                config.root.content.filter(v => v.content.length === 0).forEach(v => {
138                    const index = config.root.content.indexOf(v)
139                    if (index > -1) {
140                        config.root.content.splice(index, 1)
141                    }
142                })
143            }
144        }
145    })
146
147    serverItems.forEach(item => {
148        // 更新服务器端组件可见状态
149        const com = localComponents.find(i => i.componentState.key === item.componentState.key)
150        option.invokeVisibleChangedCallback(item.title, com !== void 0)
151
152        // 本地存储中没有，配置中有
153        if (com === void 0) {
154            if (config.root.content.length > 0) {
155                if (config.root.type === 'stack' && config.root.content.length === 1 && option.content.length === 1) {
156                    config.root.type = option.content[0].type;
157                    config.root.content = option.content[0].content
158                }
159                else {
160                    config.root.content.push(parseItem(item))
161                }
162            }
163            else {
164                config.root.type = option.content[0].type;
165                config.root.content = option.content[0].content;
166            }
167        }
168    })
169
170    // set stack headers
171    // 本地配置
172    const localStacks = getAllItemsByType('stack', config.root)
173    // 服务器端配置
174    const serverStacks = getAllItemsByType('stack', option)
175
176    localStacks.forEach(s => {
177        const stack = {
178            hasHeaders: true,
179            ...findStack(s, serverStacks),
180        };
181        s.header = {
182            ...s.header,
183            show: stack.hasHeaders
184        }
185    });

186}
187
188const parseItem = item => ({
189    type: 'component',
190    content: [],
191    title: item.title,
192    id: item.id,
193    componentType: 'component',
194    componentState: item.componentState
195});
196
197const findStack = (stack, stacks) => {
198    let find = null;
199    for (let com of stack.content) {
200        find = stacks.find(s => s.content.find(c => c.componentState.key === com.componentState.key));
201        if (find) {
202            break;
203        }
204    }
205    return find;
206}
207
208export { createDock };