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
135 lines (115 loc) · 2.97 KB
/
Copy pathuseLayout.js
File metadata and controls
135 lines (115 loc) · 2.97 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
130
131
132
133
134
135
/**
* 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'
import { constants } from '@opentiny/tiny-engine-utils'
const { PAGE_STATUS } = constants
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
const isEmptyPage = () => layoutState.pageStatus?.state === PAGE_STATUS.Empty
export default () => {
return {
PLUGIN_NAME,
activeSetting,
activePlugin,
closePlugin,
layoutState,
getScale,
setDimension,
getDimension,
registerPluginApi,
getPluginApi,
getPluginState,
pluginState,
isEmptyPage
}
}