@zhangqingcq/vgce 0.0.19 → 0.0.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/README.md +1 -1
  2. package/dist/style.css +2 -2
  3. package/dist/vgce.js +15857 -15275
  4. package/dist/vgce.umd.cjs +82 -129
  5. package/package.json +4 -6
  6. package/src/assets/base.less +79 -31
  7. package/src/assets/icons/delete-gray.svg +1 -0
  8. package/src/assets/icons/delete.svg +1 -12
  9. package/src/assets/icons/export.svg +1 -1
  10. package/src/assets/icons/import.svg +1 -1
  11. package/src/assets/icons/line-active.svg +1 -0
  12. package/src/assets/icons/line.svg +1 -0
  13. package/src/assets/icons/menu-fold.svg +1 -9
  14. package/src/assets/icons/menu-unfold.svg +1 -9
  15. package/src/assets/icons/preview.svg +1 -6
  16. package/src/assets/icons/question.svg +1 -0
  17. package/src/assets/icons/redo-gray.svg +1 -0
  18. package/src/assets/icons/redo.svg +1 -8
  19. package/src/assets/icons/return.svg +1 -8
  20. package/src/assets/icons/rotate.svg +1 -1
  21. package/src/assets/icons/save.svg +1 -9
  22. package/src/assets/icons/undo-gray.svg +1 -0
  23. package/src/assets/icons/undo.svg +1 -7
  24. package/src/assets/svgs/sheet-border.svg +1 -0
  25. package/src/assets/svgs/svg-text.svg +1 -5
  26. package/src/components/svg-analysis/index.vue +1 -1
  27. package/src/components/svg-editor/center-panel/index.vue +508 -176
  28. package/src/components/svg-editor/component-tree/index.vue +4 -0
  29. package/src/components/svg-editor/connection-line/index.vue +12 -8
  30. package/src/components/svg-editor/connection-panel/index.vue +121 -181
  31. package/src/components/svg-editor/handle-panel/index.vue +32 -24
  32. package/src/components/svg-editor/index.vue +15 -22
  33. package/src/components/svg-editor/left-panel/index.vue +2 -2
  34. package/src/components/svg-editor/right-panel/bind-anchor.vue +124 -0
  35. package/src/components/svg-editor/right-panel/code-edit-modal.vue +1 -1
  36. package/src/components/svg-editor/right-panel/dynamic-el-form-item.vue +8 -1
  37. package/src/components/svg-editor/right-panel/index.vue +117 -56
  38. package/src/components/svg-editor/top-panel/index.vue +109 -25
  39. package/src/components/svg-viewer/index.vue +31 -21
  40. package/src/components/vue3-ruler-tool/index.vue +329 -372
  41. package/src/config/files/clock-a.vue +64 -64
  42. package/src/config/svg/animation/index.ts +1 -1
  43. package/src/config/svg/custom/svg-text.ts +2 -2
  44. package/src/config/svg/stateful/index.ts +1 -1
  45. package/src/config/svg/stateless/index.ts +3 -2
  46. package/src/config/svg/stateless/sheet-border.ts +22 -0
  47. package/src/config/types.ts +1 -0
  48. package/src/stores/config/index.ts +1 -8
  49. package/src/stores/config/types.ts +0 -8
  50. package/src/stores/global/index.ts +0 -10
  51. package/src/stores/global/types.ts +33 -10
  52. package/src/stores/svg-edit-layout/index.ts +7 -0
  53. package/src/stores/svg-edit-layout/types.ts +1 -0
  54. package/src/utils/index.ts +227 -103
  55. package/src/utils/scale-core.ts +1 -0
  56. package/src/views/EditorS.vue +1 -1
  57. package/types/index.d.ts +4 -6
@@ -0,0 +1,124 @@
1
+ <script lang="ts" setup>
2
+ import { ELineBindAnchors } from '@/components/config/types'
3
+ import { useGlobalStore } from '@/stores/global'
4
+ import { pinia } from '@/hooks'
5
+ import { EDoneJsonType } from '@/config/types'
6
+ import { ElFormItem, ElSwitch, ElSelect, ElOption, ElInputNumber } from 'element-plus'
7
+ import { moveAnchors, setSvgActualInfo } from '@/utils'
8
+
9
+ const globalStore = useGlobalStore(pinia)
10
+
11
+ const emit = defineEmits(['update:modelValue'])
12
+ const props = defineProps<{ modelValue?: { target_id: string; type: ELineBindAnchors } | null; title: string }>()
13
+
14
+ const switchValue = computed({
15
+ get() {
16
+ return props.modelValue !== null
17
+ },
18
+ set(v: boolean) {
19
+ let t: any = null
20
+ if (v) {
21
+ t = {
22
+ target_id: '',
23
+ type: ''
24
+ }
25
+ }
26
+ emit('update:modelValue', t)
27
+ }
28
+ })
29
+
30
+ const _targetId = computed({
31
+ get() {
32
+ return props.modelValue?.target_id ?? undefined
33
+ },
34
+ set(v) {
35
+ let t: any = null
36
+ if (switchValue.value) {
37
+ t = {
38
+ target_id: v,
39
+ type: _type.value
40
+ }
41
+ }
42
+ emit('update:modelValue', t)
43
+ }
44
+ })
45
+
46
+ const _type = computed({
47
+ get() {
48
+ return props.modelValue?.type ?? undefined
49
+ },
50
+ set(v) {
51
+ let t: any = null
52
+ if (switchValue.value) {
53
+ t = {
54
+ target_id: _targetId.value,
55
+ type: v
56
+ }
57
+ }
58
+ emit('update:modelValue', t)
59
+ }
60
+ })
61
+
62
+ const _targets = computed(() =>
63
+ globalStore.done_json
64
+ .filter((e: Record<string, any>) => e.type !== EDoneJsonType.ConnectionLine)
65
+ .map((e: Record<string, any>) => ({
66
+ label: e.title,
67
+ value: e.id
68
+ }))
69
+ )
70
+
71
+ const _types = [
72
+ {
73
+ label: '上锚点',
74
+ value: ELineBindAnchors.TopCenter
75
+ },
76
+ {
77
+ label: '右锚点',
78
+ value: ELineBindAnchors.Right
79
+ },
80
+ {
81
+ label: '下锚点',
82
+ value: ELineBindAnchors.BottomCenter
83
+ },
84
+ {
85
+ label: '左锚点',
86
+ value: ELineBindAnchors.Left
87
+ }
88
+ ]
89
+
90
+ function changHandle() {
91
+ nextTick(function () {
92
+ if (switchValue.value && props.modelValue?.target_id && props.modelValue?.type && globalStore.handle_svg_info) {
93
+ let done_json: any = null
94
+ for (let e of globalStore.done_json) {
95
+ if (e.id === props.modelValue.target_id) {
96
+ done_json = e
97
+ }
98
+ }
99
+ if (done_json) {
100
+ setSvgActualInfo(done_json)
101
+ moveAnchors(done_json)
102
+ }
103
+ }
104
+ })
105
+ }
106
+ </script>
107
+
108
+ <template>
109
+ <el-form-item :label="props.title" size="small">
110
+ <el-switch v-model="switchValue" @change="changHandle" />
111
+ </el-form-item>
112
+ <el-form-item label="绑定对象" size="small" v-if="switchValue">
113
+ <el-select v-model="_targetId" @change="changHandle">
114
+ <el-option v-for="t of _targets" :key="t.value" :label="t.label" :value="t.value" />
115
+ </el-select>
116
+ </el-form-item>
117
+ <el-form-item label="绑定位置" size="small" v-if="switchValue">
118
+ <el-select v-model="_type" @change="changHandle">
119
+ <el-option v-for="t of _types" :key="t.value" :label="t.label" :value="t.value" />
120
+ </el-select>
121
+ </el-form-item>
122
+ </template>
123
+
124
+ <style lang="less" scoped></style>
@@ -3,7 +3,7 @@
3
3
  import '@/components/ace-edit'
4
4
  import { ElButton, ElDialog } from 'element-plus'
5
5
 
6
- const props = withDefaults(defineProps<{ modelValue: any; lang: string; title: string }>(), {
6
+ const props = withDefaults(defineProps<{ modelValue: any; lang?: string; title?: string }>(), {
7
7
  modelValue: () => ({}),
8
8
  lang: 'json',
9
9
  title: '编辑'
@@ -36,7 +36,7 @@
36
36
  <span v-else>{{ key }}</span>
37
37
  </template>
38
38
  <el-tooltip
39
- :content="attr_item.val"
39
+ :content="JSON.stringify(attr_item.val)"
40
40
  v-if="getStringWidth(String(attr_item.val)) > 145"
41
41
  placement="left"
42
42
  popper-class="props-popper"
@@ -65,6 +65,13 @@
65
65
  v-model="attr_item.val"
66
66
  :disabled="Boolean(attr_item?.disabled)"
67
67
  />
68
+ <el-input
69
+ v-else-if="attr_item.type === EConfigItemPropsType.Textarea"
70
+ v-model="attr_item.val"
71
+ autosize
72
+ type="textarea"
73
+ :disabled="Boolean(attr_item?.disabled)"
74
+ />
68
75
  <el-color-picker
69
76
  v-else-if="attr_item.type === EConfigItemPropsType.Color"
70
77
  v-model="attr_item.val"
@@ -1,5 +1,6 @@
1
1
  <script setup lang="ts">
2
2
  import {
3
+ ElButton,
3
4
  ElCollapse,
4
5
  ElCollapseItem,
5
6
  ElColorPicker,
@@ -14,25 +15,28 @@
14
15
  ElTabPane,
15
16
  ElTabs
16
17
  } from 'element-plus'
18
+ import { Aim } from '@element-plus/icons-vue'
17
19
  import { pinia } from '@/hooks'
18
20
  import { useConfigStore } from '@/stores/config'
19
21
  import { useGlobalStore } from '@/stores/global'
20
- import { numberArray } from '@/utils'
21
- import { EGlobalStoreIntention } from '@/stores/global/types'
22
+ import { moveAnchors, numberArray, setSvgActualInfo } from '@/utils'
22
23
  import type { IDoneJson } from '@/stores/global/types'
24
+ import { EGlobalStoreIntention } from '@/stores/global/types'
23
25
  import DynamicElFormItem from './dynamic-el-form-item.vue'
24
26
  import CommonAnimate from './common-animate.vue'
25
27
  import ComponentTree from '@/components/svg-editor/component-tree/index.vue'
26
28
  import SvgAnalysis from '@/components/svg-analysis/index.vue'
27
29
  import List from '@/components/svg-editor/right-panel/list.vue'
28
30
  import Condition from '@/components/svg-editor/right-panel/condition.vue'
29
- import { ElButton } from 'element-plus'
30
31
  import CodeEditModal from '@/components/svg-editor/right-panel/code-edit-modal.vue'
31
- import { EConditionType, EEventAction, EEventType } from '@/config/types'
32
32
  import type { IEventsItem } from '@/config/types'
33
+ import { EConditionType, EDoneJsonType, EEventAction, EEventType } from '@/config/types'
34
+ import { useSvgEditLayoutStore } from '@/stores/svg-edit-layout'
35
+ import BindAnchor from '@/components/svg-editor/right-panel/bind-anchor.vue'
33
36
 
34
37
  const configStore = useConfigStore(pinia)
35
38
  const globalStore = useGlobalStore(pinia)
39
+ const svgEditLayoutStore = useSvgEditLayoutStore(pinia)
36
40
 
37
41
  const activeName = ref('page')
38
42
  const activeNameB = ref('style')
@@ -80,6 +84,23 @@
80
84
  const deleteE = (i: number) => {
81
85
  globalStore.handle_svg_info?.info?.events!.splice(i, 1)
82
86
  }
87
+
88
+ const resetCanvas = () => {
89
+ svgEditLayoutStore.center_offset = {
90
+ x: 0,
91
+ y: 0
92
+ }
93
+ }
94
+
95
+ const changHandle = () => {
96
+ if (globalStore.handle_svg_info) {
97
+ const done_json = globalStore.done_json[globalStore.handle_svg_info.index]
98
+ nextTick(function () {
99
+ setSvgActualInfo(done_json)
100
+ moveAnchors(done_json)
101
+ })
102
+ }
103
+ }
83
104
  </script>
84
105
 
85
106
  <template>
@@ -89,23 +110,52 @@
89
110
  <el-form-item label="背景色" size="small">
90
111
  <el-color-picker v-model="configStore.svg.background_color" />
91
112
  </el-form-item>
92
- <el-form-item label="x原点" size="small">
93
- <el-input-number v-model="configStore.svg.position_center.x" />
113
+ <el-form-item label="画布" size="small">
114
+ <el-button size="small" @click="resetCanvas" :icon="Aim">重置位置</el-button>
94
115
  </el-form-item>
95
- <el-form-item label="y原点" size="small">
96
- <el-input-number v-model="configStore.svg.position_center.y" />
116
+ <el-form-item label="X轴偏移" size="small">
117
+ <el-input-number v-model="svgEditLayoutStore.center_offset.x" />
97
118
  </el-form-item>
98
- <el-form-item label="网格" size="small">
99
- <el-switch v-model="configStore.svg.grid" />
119
+ <el-form-item label="Y轴偏移" size="small">
120
+ <el-input-number v-model="svgEditLayoutStore.center_offset.y" />
121
+ </el-form-item>
122
+ <el-form-item label="缩放" size="small">
123
+ <el-input-number v-model="configStore.svg.scale" :step="0.1" step-strictly />
100
124
  </el-form-item>
101
125
  <el-form-item label="标尺" size="small">
102
126
  <el-switch v-model="configStore.svg.ruler" />
103
127
  </el-form-item>
104
- <el-form-item label="缩放" size="small">
105
- <el-input-number v-model="configStore.svg.scale" :step="0.1" step-strictly />
128
+ <el-form-item label="网格" size="small">
129
+ <el-switch v-model="configStore.svg.grid" />
130
+ </el-form-item>
131
+ <el-form-item label="网格颜色" size="small" v-if="configStore.svg.grid">
132
+ <el-color-picker v-model="configStore.svg.grid_color" />
106
133
  </el-form-item>
107
134
  </el-form>
108
135
  </el-tab-pane>
136
+ <el-tab-pane label="连线" name="line">
137
+ <el-form label-width="60px" label-position="left" v-if="configStore.connection_line.props">
138
+ <dynamic-el-form-item :obj-info="configStore.connection_line.props" :hide="['point_position']" />
139
+ </el-form>
140
+ <el-form label-width="60px" label-position="left" v-if="configStore.connection_line.animations">
141
+ <el-form-item :label="configStore.connection_line.animations.type.title" size="small">
142
+ <el-select v-model="configStore.connection_line.animations.type.val" placeholder="Select" size="small">
143
+ <el-option
144
+ v-for="item in configStore.connection_line.animations.type.options"
145
+ :key="item.value"
146
+ :label="item.label"
147
+ :value="item.value"
148
+ />
149
+ </el-select>
150
+ </el-form-item>
151
+
152
+ <dynamic-el-form-item
153
+ :obj-info="configStore.connection_line.animations"
154
+ v-if="configStore.connection_line.animations.type.val !== 'None'"
155
+ :hide="['type', 'repeatCount']"
156
+ />
157
+ </el-form>
158
+ </el-tab-pane>
109
159
  <el-tab-pane label="通信" name="net">
110
160
  <el-collapse v-model="netActive">
111
161
  <el-collapse-item name="MQTT">
@@ -129,14 +179,6 @@
129
179
  </el-collapse-item>
130
180
  </el-collapse>
131
181
  </el-tab-pane>
132
- <el-tab-pane label="连线" name="line">
133
- <el-form label-width="60px" label-position="left" v-if="configStore.connection_line.props">
134
- <dynamic-el-form-item :obj-info="configStore.connection_line.props" :hide="['point_position']" />
135
- </el-form>
136
- <el-form label-width="60px" label-position="left" v-if="configStore.connection_line.animations">
137
- <dynamic-el-form-item :obj-info="configStore.connection_line.animations" />
138
- </el-form>
139
- </el-tab-pane>
140
182
  <el-tab-pane label="结构" name="tree">
141
183
  <component-tree />
142
184
  </el-tab-pane>
@@ -151,17 +193,68 @@
151
193
  <el-form-item label="标题" size="small">
152
194
  <el-input v-model="globalStore.handle_svg_info!.info.title" />
153
195
  </el-form-item>
154
- <el-form-item label="x坐标" size="small">
155
- <el-input-number v-model="globalStore.handle_svg_info!.info.x" />
196
+ <el-form-item label="X坐标" size="small">
197
+ <el-input-number v-model="globalStore.handle_svg_info!.info.x" @change="changHandle" />
198
+ </el-form-item>
199
+ <el-form-item label="Y坐标" size="small">
200
+ <el-input-number v-model="globalStore.handle_svg_info!.info.y" @change="changHandle" />
156
201
  </el-form-item>
157
- <el-form-item label="y坐标" size="small">
158
- <el-input-number v-model="globalStore.handle_svg_info!.info.y" />
202
+ <el-form-item label="X缩放" size="small">
203
+ <el-input-number v-model="globalStore.handle_svg_info!.info.scale_x" @change="changHandle" />
204
+ </el-form-item>
205
+ <el-form-item label="Y缩放" size="small">
206
+ <el-input-number v-model="globalStore.handle_svg_info!.info.scale_y" @change="changHandle" />
207
+ </el-form-item>
208
+ <el-form-item label="旋转" size="small">
209
+ <el-input-number v-model="globalStore.handle_svg_info!.info.rotate" @change="changHandle" />
159
210
  </el-form-item>
160
211
  <el-form-item label="显示" size="small">
161
212
  <el-switch v-model="globalStore.handle_svg_info!.info.display" />
162
213
  </el-form-item>
163
214
  </el-form>
164
215
  </el-tab-pane>
216
+ <el-tab-pane label="数据" name="data">
217
+ <el-form label-width="90px" label-position="left">
218
+ <el-form-item label="ID" size="small">
219
+ <el-input v-model="globalStore.handle_svg_info!.info.id" />
220
+ </el-form-item>
221
+ <div
222
+ v-for="(e, k) in globalStore.handle_svg_info!.info.state"
223
+ :key="'state' + String(k)"
224
+ v-if="globalStore.handle_svg_info!.info.state"
225
+ >
226
+ <el-form-item class="props-row" :label="String(k)" size="small"> {{ e?.default }}</el-form-item>
227
+
228
+ <el-form-item
229
+ v-if="k === 'OnOff'"
230
+ :label="globalStore.handle_svg_info!.info.state?.OnOff!.title"
231
+ size="small"
232
+ >
233
+ <el-switch v-model="globalStore.handle_svg_info!.info.state!.OnOff!.default"></el-switch>
234
+ </el-form-item>
235
+ </div>
236
+
237
+ <div v-if="globalStore.handle_svg_info!.info?.hasOwnProperty('tag_slot')">
238
+ <el-form-item class="props-row" label="tag_slot" size="small">
239
+ {{ globalStore.handle_svg_info!.info.tag_slot }}
240
+ </el-form-item>
241
+ <el-form-item label="文字插槽" size="small">
242
+ <el-input v-model="globalStore.handle_svg_info!.info.tag_slot" />
243
+ </el-form-item>
244
+ </div>
245
+ <dynamic-el-form-item :obj-info="globalStore.handle_svg_info!.info.props" code />
246
+ <bind-anchor
247
+ v-if="globalStore.handle_svg_info?.info.type === EDoneJsonType.ConnectionLine"
248
+ v-model="globalStore.handle_svg_info!.info!.bind_anchors!.start"
249
+ title="绑定起点"
250
+ />
251
+ <bind-anchor
252
+ v-if="globalStore.handle_svg_info?.info.type === EDoneJsonType.ConnectionLine"
253
+ v-model="globalStore.handle_svg_info!.info!.bind_anchors!.end"
254
+ title="绑定终点"
255
+ />
256
+ </el-form>
257
+ </el-tab-pane>
165
258
  <el-tab-pane label="事件" name="event">
166
259
  <el-button type="primary" style="width: 100%" @click="addEvent">添加事件</el-button>
167
260
  <el-collapse v-model="eventsActive">
@@ -240,38 +333,6 @@
240
333
  </el-form-item>
241
334
  </el-form>
242
335
  </el-tab-pane>
243
- <el-tab-pane label="数据" name="data">
244
- <el-form label-width="90px" label-position="left">
245
- <el-form-item label="ID" size="small">
246
- <el-input v-model="globalStore.handle_svg_info!.info.id" />
247
- </el-form-item>
248
- <div
249
- v-for="(e, k) in globalStore.handle_svg_info!.info.state"
250
- :key="'state' + String(k)"
251
- v-if="globalStore.handle_svg_info!.info.state"
252
- >
253
- <el-form-item class="props-row" :label="String(k)" size="small"> {{ e?.default }}</el-form-item>
254
-
255
- <el-form-item
256
- v-if="k === 'OnOff'"
257
- :label="globalStore.handle_svg_info!.info.state?.OnOff!.title"
258
- size="small"
259
- >
260
- <el-switch v-model="globalStore.handle_svg_info!.info.state!.OnOff!.default"></el-switch>
261
- </el-form-item>
262
- </div>
263
-
264
- <div v-if="globalStore.handle_svg_info!.info?.hasOwnProperty('tag_slot')">
265
- <el-form-item class="props-row" label="tag_slot" size="small">
266
- {{ globalStore.handle_svg_info!.info.tag_slot }}
267
- </el-form-item>
268
- <el-form-item label="文字插槽" size="small">
269
- <el-input v-model="globalStore.handle_svg_info!.info.tag_slot" />
270
- </el-form-item>
271
- </div>
272
- <dynamic-el-form-item :obj-info="globalStore.handle_svg_info!.info.props" code />
273
- </el-form>
274
- </el-tab-pane>
275
336
  <el-tab-pane label="结构" name="tree">
276
337
  <component-tree />
277
338
  </el-tab-pane>
@@ -3,12 +3,14 @@
3
3
  import { useConfigStore } from '@/stores/config'
4
4
  import { useGlobalStore } from '@/stores/global'
5
5
  import { useEditPrivateStore } from '@/stores/system'
6
- import { ElIcon, ElDivider } from 'element-plus'
6
+ import { ElIcon, ElDivider, ElDialog, ElScrollbar } from 'element-plus'
7
7
  import SvgAnalysis from '../../svg-analysis/index.vue'
8
8
  import { useSvgEditLayoutStore } from '@/stores/svg-edit-layout'
9
9
  import { EVisibleConfKey } from '../types'
10
10
  import type { IDataModel } from '../types'
11
11
  import { EGlobalStoreIntention } from '@/stores/global/types'
12
+ import { VAceEditor } from 'vue3-ace-editor'
13
+ import LeftPanel from '@/components/svg-editor/left-panel/index.vue'
12
14
 
13
15
  const svgEditLayoutStore = useSvgEditLayoutStore(pinia)
14
16
  const globalStore = useGlobalStore(pinia)
@@ -35,13 +37,30 @@
35
37
  }
36
38
  emits('onSave', data_model)
37
39
  }
40
+
41
+ const open = ref(false)
42
+
43
+ const connection_line = computed({
44
+ get: () => globalStore.intention === EGlobalStoreIntention.Connection,
45
+ set(v: any) {
46
+ globalStore.intention = v ? EGlobalStoreIntention.Connection : EGlobalStoreIntention.None
47
+ if (v) {
48
+ globalStore.setHandleSvgInfo(null)
49
+ }
50
+ }
51
+ })
38
52
  </script>
39
53
 
40
54
  <template>
41
55
  <div class="flex justify-between" style="width: 100%">
42
- <div class="flex items-center justify-between" style="width: 220px">
43
- <div class="flex items-center"><span class="logo-title">组态编辑器</span></div>
44
- <el-icon :size="24" class="bt-Icon" @click="svgEditLayoutStore.left_nav = !svgEditLayoutStore.left_nav">
56
+ <div class="flex items-center justify-between" style="width: 250px">
57
+ <div class="flex items-center"><span class="logo-title">Svg Editor</span></div>
58
+ <el-icon
59
+ :size="24"
60
+ class="bt-Icon"
61
+ @click="svgEditLayoutStore.left_nav = !svgEditLayoutStore.left_nav"
62
+ :title="svgEditLayoutStore.left_nav ? '隐藏左侧菜单' : '显示左侧菜单'"
63
+ >
45
64
  <svg-analysis v-if="svgEditLayoutStore.left_nav" name="menu-unfold" />
46
65
  <svg-analysis v-else name="menu-fold" />
47
66
  </el-icon>
@@ -50,65 +69,79 @@
50
69
  <div class="flex items-center">
51
70
  <el-icon
52
71
  title="撤销 ctrl+z"
53
- :size="20"
72
+ :size="24"
54
73
  :class="`${editPrivateStore.getTopBtnUndoStatus ? 'bt-Icon' : 'icon-disable'} ml-20px`"
55
74
  @click="() => editPrivateStore.topUndoBtnClick()"
56
75
  >
57
- <svg-analysis name="undo" />
76
+ <svg-analysis :name="editPrivateStore.getTopBtnUndoStatus ? 'undo' : 'undo-gray'" />
58
77
  </el-icon>
59
78
  <el-icon
60
79
  title="重做 ctrl+shift+z"
61
80
  :class="`${editPrivateStore.getTopBtnRedoStatus ? 'bt-Icon' : 'icon-disable'} ml-5px`"
62
- :size="20"
81
+ :size="24"
63
82
  @click="() => editPrivateStore.topRedoBtnClick()"
64
83
  >
65
- <svg-analysis name="redo" />
84
+ <svg-analysis :name="editPrivateStore.getTopBtnRedoStatus ? 'redo' : 'redo-gray'" />
66
85
  </el-icon>
67
86
  <el-divider direction="vertical"></el-divider>
68
87
  <el-icon
69
88
  title="清空 ctrl+delete"
70
- :class="`${globalStore.done_json.length > 0 ? 'bt-Icon' : 'icon-disable'}`"
71
- :size="20"
89
+ :class="globalStore.done_json.length > 0 ? 'bt-Icon' : 'icon-disable'"
90
+ :size="24"
72
91
  @click="onDeleteBtnClick"
73
92
  >
74
- <svg-analysis name="delete" />
93
+ <svg-analysis :name="globalStore.done_json.length > 0 ? 'delete' : 'delete-gray'" />
75
94
  </el-icon>
76
95
  <el-divider direction="vertical" />
77
96
  <el-icon
78
97
  title="导入数据模型"
79
98
  class="bt-Icon"
80
- :size="20"
99
+ :size="24"
81
100
  @click="emits('changeVisible', EVisibleConfKey.ImportJson, true)"
82
101
  >
83
102
  <svg-analysis name="import" />
84
103
  </el-icon>
85
104
  <el-icon
86
105
  title="导出数据模型"
87
- :size="20"
106
+ :size="24"
88
107
  class="bt-Icon ml-5px"
89
108
  @click="emits('changeVisible', EVisibleConfKey.ExportJson, true)"
90
109
  >
91
110
  <svg-analysis name="export" />
92
111
  </el-icon>
112
+ <el-divider direction="vertical" />
113
+ <el-icon
114
+ title="创建连线"
115
+ class="bt-Icon"
116
+ :class="{ active: connection_line }"
117
+ :size="24"
118
+ @click="connection_line = !connection_line"
119
+ >
120
+ <svg-analysis :name="connection_line ? 'line-active' : 'line'" />
121
+ </el-icon>
122
+ <el-divider direction="vertical" />
123
+ <el-icon title="说明" class="bt-Icon" :size="24" @click="open = !open">
124
+ <svg-analysis name="question" />
125
+ </el-icon>
93
126
  <!-- <el-divider direction="vertical"></el-divider>
94
- <el-icon title="组合" class="bt-Icon" :size="20">
127
+ <el-icon title="组合" class="bt-Icon" :size="24">
95
128
  <svg-analysis name="group"/>
96
129
  </el-icon>
97
130
  <el-divider direction="vertical"></el-divider>
98
- <el-icon title="取消组合" class="bt-Icon" :size="20">
131
+ <el-icon title="取消组合" class="bt-Icon" :size="24">
99
132
  <svg-analysis name="ungroup"/>
100
133
  </el-icon>
101
134
  <el-divider direction="vertical"></el-divider>
102
- <el-icon title="锁定" class="bt-Icon" :size="20">
135
+ <el-icon title="锁定" class="bt-Icon" :size="24">
103
136
  <svg-analysis name="lock"/>
104
137
  </el-icon> -->
105
138
  </div>
106
139
  <div class="flex items-center mr-20px">
107
- <el-icon title="返回" class="bt-Icon" :size="20" @click="emits('onReturn')">
140
+ <el-icon title="返回" class="bt-Icon" :size="24" @click="emits('onReturn')">
108
141
  <svg-analysis name="return" />
109
142
  </el-icon>
110
143
  <el-divider direction="vertical"></el-divider>
111
- <el-icon title="保存" class="bt-Icon" :size="20" @click="onSaveClick">
144
+ <el-icon title="保存" class="bt-Icon" :size="24" @click="onSaveClick">
112
145
  <svg-analysis name="save" />
113
146
  </el-icon>
114
147
  <el-divider direction="vertical"></el-divider>
@@ -117,23 +150,74 @@
117
150
  </el-icon>
118
151
  </div>
119
152
  </div>
120
- <div class="flex items-center" style="width: 220px">
121
- <el-icon :size="24" class="bt-Icon" @click="svgEditLayoutStore.right_nav = !svgEditLayoutStore.right_nav">
153
+ <div class="flex items-center" style="width: 250px">
154
+ <el-icon
155
+ :size="24"
156
+ class="bt-Icon"
157
+ @click="svgEditLayoutStore.right_nav = !svgEditLayoutStore.right_nav"
158
+ :title="svgEditLayoutStore.right_nav ? '隐藏右侧菜单' : '显示右侧菜单'"
159
+ >
122
160
  <svg-analysis v-if="svgEditLayoutStore.right_nav" name="menu-fold" />
123
161
  <svg-analysis v-else name="menu-unfold" />
124
162
  </el-icon>
125
163
  </div>
126
164
  </div>
165
+ <el-dialog v-model="open" title="使用说明" width="60%" class="guide-dialog">
166
+ <el-scrollbar max-height="60vh">
167
+ <div class="font-bold mb-10px text-15px guide-title" style="padding-top: 16px">多选</div>
168
+ <div>鼠标按住左键可以框选,也可以按住ctrl+鼠标左键点图形进行多选</div>
169
+ <div class="el-divider el-divider--horizontal" role="separator" style="--el-border-style: solid"> </div>
170
+ <div class="font-bold mb-10px text-15px guide-title">拖动画布</div>
171
+ <div>右键画布然后拖动即可,右侧面板‘图纸’栏可微调或重置位置</div>
172
+ <div class="el-divider el-divider--horizontal" role="separator" style="--el-border-style: solid"> </div>
173
+ <div class="font-bold mb-10px text-15px guide-title">画布缩放</div>
174
+ <div>使用鼠标滚轮或者右侧面板‘图纸’栏可控制画布缩放</div>
175
+ <div class="el-divider el-divider--horizontal" role="separator" style="--el-border-style: solid"> </div>
176
+ <div class="font-bold mb-10px text-15px guide-title">标尺辅助线</div>
177
+ <div>在标尺区域按住鼠标左键并拖动即可创建标尺辅助线,将标尺辅助线拖动到标尺区域即可删除标尺辅助线</div>
178
+ <div class="el-divider el-divider--horizontal" role="separator" style="--el-border-style: solid"> </div>
179
+ <div class="font-bold mb-10px text-15px guide-title">连线样式</div>
180
+ <div
181
+ >在右侧‘连线’栏可以统一配置连线样式,配置后先增加的线会应用新样式,之前的线样式不变,如需改变,可选中线手动更改或删除重画</div
182
+ >
183
+ <div class="el-divider el-divider--horizontal" role="separator" style="--el-border-style: solid"> </div>
184
+ <div class="font-bold mb-10px text-15px guide-title">横线和竖线</div>
185
+ <div>画线的时候按住ctrl即可画竖线,按住shift即可画横线</div>
186
+ <div class="el-divider el-divider--horizontal" role="separator" style="--el-border-style: solid"> </div>
187
+ <div class="font-bold mb-10px text-15px guide-title">线段选中</div>
188
+ <div style="padding-bottom: 14px">
189
+ 若线段绑定了锚点,移动线段,绑定的锚点不会移动。若是想将线段整体移动,需要先选中线段,在右侧‘数据’栏里解除绑定
190
+ </div>
191
+ </el-scrollbar>
192
+ </el-dialog>
127
193
  </template>
128
194
 
129
195
  <style scoped lang="less">
130
196
  .logo-title {
131
- font-size: 15px;
132
- font-weight: 600;
197
+ font-size: 16px;
198
+ color: #555;
199
+ font-weight: 500;
200
+ }
201
+
202
+ .guide-title {
203
+ color: #99a;
133
204
  }
134
205
 
135
- .icon-disable {
136
- cursor: not-allowed;
137
- color: #ccc;
206
+ .el-divider {
207
+ border-color: #f1f1f5;
208
+ }
209
+ </style>
210
+ <style lang="less">
211
+ .guide-dialog {
212
+ .el-dialog__header {
213
+ background-color: #f1f1f5;
214
+ margin-right: 0;
215
+ padding-right: 16px;
216
+ }
217
+ .el-dialog__body {
218
+ padding-top: 0;
219
+ padding-bottom: 8px;
220
+ padding-right: 8px;
221
+ }
138
222
  }
139
223
  </style>