forked from opentiny/tiny-engine
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathuseLayout.js
More file actions
129 lines (111 loc) · 2.78 KB
/
Copy pathuseLayout.js
File metadata and controls
129 lines (111 loc) · 2.78 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
/**
* Copyright (c) 2023 - present TinyEngine Authors.
* Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/
import { reactive, nextTick } from 'vue'
const PLUGIN_NAME = {
Materials: 'Materials',
AppManage: 'AppManage',
BlockManage: 'BlockManage',
PageController: 'PageController',
Lock: 'Lock',
Tutorial: 'Tutorial',
OutlineTree: 'OutlineTree',
save: 'save'
}
const pluginState = reactive({
pluginEvent: 'all'
})
const layoutState = reactive({
deviceType: 'desktop',
iframeWidth: '1200px',
dimension: {
deviceType: 'desktop',
width: '',
maxWidth: '',
minWidth: '',
scale: 1,
height: '100%'
},
plugins: {
fixedPanels: [PLUGIN_NAME.Materials],
render: null,
api: {} // 插件需要注册交互API到这里
},
settings: {
render: 'props',
api: null,
activating: false, // 右侧面版激活提示状态
showDesignSettings: true
},
toolbars: {
visiblePopover: false
},
pageStatus: ''
})
const registerPluginApi = (api) => {
Object.assign(layoutState.plugins.api, api)
}
const getScale = () => layoutState.dimension.scale
// 激活setting面板并高亮提示
const activeSetting = (name) => {
const { settings } = layoutState
settings.render = name
nextTick(() => {
settings.activating = true
setTimeout(() => {
// 高亮提示延时
settings.activating = false
}, 1000)
})
}
// 获取当前插件注册的Api
const getPluginApi = (pluginName) => {
const { plugins } = layoutState
return plugins.api[pluginName] || plugins.api
}
// 激活plugin面板并返回当前插件注册的Api
const activePlugin = (name, noActiveRender) => {
const { plugins } = layoutState
if (!noActiveRender) {
plugins.render = name
}
return new Promise((resolve) => {
nextTick(() => resolve(getPluginApi(name)))
})
}
// 关闭插件面板
const closePlugin = (forceClose) => {
const { plugins } = layoutState
if (!plugins.fixedPanels.includes(plugins.render) || forceClose) {
plugins.render = null
}
}
const setDimension = (data) => {
Object.assign(layoutState.dimension, data)
}
const getDimension = () => layoutState.dimension
const getPluginState = () => layoutState.plugins
export default () => {
return {
PLUGIN_NAME,
activeSetting,
activePlugin,
closePlugin,
layoutState,
getScale,
setDimension,
getDimension,
registerPluginApi,
getPluginApi,
getPluginState,
pluginState
}
}