@zhangqingcq/vgce 0.1.9 → 0.1.11

Sign up to get free protection for your applications and to get access to all the features.
Files changed (11) hide show
  1. package/README.md +53 -15
  2. package/dist/style.css +1 -1
  3. package/dist/vgce.js +20273 -20309
  4. package/dist/vgce.umd.cjs +38 -35
  5. package/package.json +4 -4
  6. package/src/components/svg-editor/center-panel.vue +146 -147
  7. package/src/components/svg-editor/index.vue +5 -1
  8. package/src/components/svg-editor/top-panel.vue +1 -16
  9. package/src/components/svg-viewer.vue +68 -69
  10. package/src/views/EditorS.vue +21 -21
  11. package/src/views/Preview.vue +38 -38
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zhangqingcq/vgce",
3
- "version": "0.1.9",
3
+ "version": "0.1.11",
4
4
  "description": "Vector graphics configure editor. svg组态编辑器。基于vue3.3+ts+element-plus+vite",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -54,13 +54,13 @@
54
54
  "dependencies": {
55
55
  "@element-plus/icons-vue": "^2.1.0",
56
56
  "@types/lodash-es": "^4.17.8",
57
- "ace-builds": "^1.14.0",
57
+ "ace-builds": "1.14.0",
58
58
  "animate.css": "^4.1.1",
59
59
  "axios": "^1.4.0",
60
60
  "echarts": "^5.4.1",
61
- "element-plus": "^2.3.8",
61
+ "element-plus": "2.8.0",
62
62
  "lodash-es": "^4.17.21",
63
- "mqtt": "^5.1.3",
63
+ "mqtt": "5.1.3",
64
64
  "pinia": "^2.1.3",
65
65
  "vue": "^3.3.4",
66
66
  "vue-echarts": "^6.5.1",
package/src/components/svg-editor/center-panel.vue CHANGED
@@ -944,9 +944,10 @@
944
944
 
945
945
  <template>
946
946
  <div
947
+ ref="canvasRef"
947
948
  class="canvas"
949
+ :style="{ backgroundColor: configStore.svg.background_color, position: 'relative' }"
948
950
  tabindex="0"
949
- ref="canvasRef"
950
951
  @drop="dropEvent"
951
952
  @dragenter="dragEnterEvent"
952
953
  @dragover="dragOverEvent"
@@ -957,171 +958,169 @@
957
958
  @keydown="onHandleKeyDown"
958
959
  @mousewheel="onMousewheel"
959
960
  >
960
- <svg
961
- xmlns="http://www.w3.org/2000/svg"
962
- :style="{ backgroundColor: configStore.svg.background_color }"
963
- width="100%"
964
- height="100%"
965
- >
966
- <defs>
967
- <pattern id="pattern_grid" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
968
- <line x1="0" y1="0" x2="0" y2="20" :stroke="configStore.svg.grid_color" />
969
- <line x1="10" y1="0" x2="10" y2="20" :stroke="configStore.svg.grid_color" />
970
- <line x1="0" y1="0" x2="20" y2="0" :stroke="configStore.svg.grid_color" />
971
- <line x1="0" y1="10" x2="20" y2="10" :stroke="configStore.svg.grid_color" />
972
- </pattern>
973
- </defs>
974
- <rect v-if="configStore.svg.grid" width="100%" height="100%" fill="url(#pattern_grid)" />
975
- <g
976
- :transform="`translate(${svgEditLayoutStore.center_offset.x * configStore.svg.scale},${
977
- svgEditLayoutStore.center_offset.y * configStore.svg.scale
978
- })rotate(${0})scale(${configStore.svg.scale})`"
979
- >
961
+ <slot name="background" />
962
+ <div style="position: absolute; left: 0; top: 0; bottom: 0; right: 0">
963
+ <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
964
+ <defs>
965
+ <pattern id="pattern_grid" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
966
+ <line x1="0" y1="0" x2="0" y2="20" :stroke="configStore.svg.grid_color" />
967
+ <line x1="10" y1="0" x2="10" y2="20" :stroke="configStore.svg.grid_color" />
968
+ <line x1="0" y1="0" x2="20" y2="0" :stroke="configStore.svg.grid_color" />
969
+ <line x1="0" y1="10" x2="20" y2="10" :stroke="configStore.svg.grid_color" />
970
+ </pattern>
971
+ </defs>
972
+ <rect v-if="configStore.svg.grid" width="100%" height="100%" fill="url(#pattern_grid)" />
980
973
  <g
981
- v-for="(item, index) in globalStore.done_json"
982
- :key="item.id"
983
- :transform="`translate(${item.x},${item.y})rotate(0)scale(1)`"
984
- v-show="item.display"
985
- @mousewheel="stopEvent"
974
+ :transform="`translate(${svgEditLayoutStore.center_offset.x * configStore.svg.scale},${
975
+ svgEditLayoutStore.center_offset.y * configStore.svg.scale
976
+ })rotate(${0})scale(${configStore.svg.scale})`"
986
977
  >
987
- <g :class="`${getCommonClass(item)}`">
988
- <g
989
- :transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
990
- item.actual_bound.y + item.actual_bound.height / 2
991
- })rotate(${item.rotate}) scale(1) translate(${-(item.actual_bound.x + item.actual_bound.width / 2)},${-(
992
- item.actual_bound.y +
993
- item.actual_bound.height / 2
994
- )})`"
995
- @mousedown="onSvgMouseDown(item, index, $event)"
996
- @mouseup="onSvgMouseUp(item, index, $event)"
997
- @mouseenter="onSvgMouseEnter(item, index, $event)"
998
- @mouseleave="onSvgMouseLeave(item, index, $event)"
999
- @contextmenu="onSvgContextMenuEvent(item, index, $event)"
1000
- >
1001
- <connection-line
1002
- v-if="item.type === EDoneJsonType.ConnectionLine"
1003
- :item-info="item"
1004
- :point-visible="visible_info.connection_line && visible_info.select_item.info?.id == item.id"
1005
- />
1006
- <use
1007
- v-else-if="item.type === EDoneJsonType.File"
1008
- :xlink:href="`#svg-${item.name}`"
1009
- v-bind="prosToVBind(item, ['height', 'width'])"
1010
- :width="item.props?.width?.val ?? 100"
1011
- :height="item.props?.height?.val ?? 100"
1012
- :id="item.id"
1013
- :transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
1014
- item.actual_bound.y + item.actual_bound.height / 2
1015
- }) scale(${item.scale_x},${item.scale_y}) translate(${-(
1016
- item.actual_bound.x +
1017
- item.actual_bound.width / 2
1018
- )},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
1019
- />
1020
- <component
1021
- v-else-if="item.type === EDoneJsonType.CustomSvg"
1022
- :is="item.tag"
1023
- v-bind="prosToVBind(item, ['height', 'width'])"
1024
- :width="item.props?.width?.val ?? 100"
1025
- :height="item.props?.height?.val ?? 100"
1026
- :id="item.id"
1027
- @resize="resizeBox"
978
+ <g
979
+ v-for="(item, index) in globalStore.done_json"
980
+ :key="item.id"
981
+ :transform="`translate(${item.x},${item.y})rotate(0)scale(1)`"
982
+ v-show="item.display"
983
+ @mousewheel="stopEvent"
984
+ >
985
+ <g :class="`${getCommonClass(item)}`">
986
+ <g
1028
987
  :transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
1029
988
  item.actual_bound.y + item.actual_bound.height / 2
1030
- }) scale(${item.scale_x},${item.scale_y}) translate(${-(
1031
- item.actual_bound.x +
1032
- item.actual_bound.width / 2
1033
- )},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
1034
- />
1035
- <foreignObject
1036
- v-else-if="item.type === EDoneJsonType.Vue"
1037
- v-bind="getActualBoundScale(item.actual_bound, item.scale_x, item.scale_y)"
1038
- :id="`foreign-object${item.id}`"
1039
- class="foreignObject"
989
+ })rotate(${item.rotate}) scale(1) translate(${-(item.actual_bound.x + item.actual_bound.width / 2)},${-(
990
+ item.actual_bound.y +
991
+ item.actual_bound.height / 2
992
+ )})`"
993
+ @mousedown="onSvgMouseDown(item, index, $event)"
994
+ @mouseup="onSvgMouseUp(item, index, $event)"
995
+ @mouseenter="onSvgMouseEnter(item, index, $event)"
996
+ @mouseleave="onSvgMouseLeave(item, index, $event)"
997
+ @contextmenu="onSvgContextMenuEvent(item, index, $event)"
1040
998
  >
999
+ <connection-line
1000
+ v-if="item.type === EDoneJsonType.ConnectionLine"
1001
+ :item-info="item"
1002
+ :point-visible="visible_info.connection_line && visible_info.select_item.info?.id == item.id"
1003
+ />
1004
+ <use
1005
+ v-else-if="item.type === EDoneJsonType.File"
1006
+ :xlink:href="`#svg-${item.name}`"
1007
+ v-bind="prosToVBind(item, ['height', 'width'])"
1008
+ :width="item.props?.width?.val ?? 100"
1009
+ :height="item.props?.height?.val ?? 100"
1010
+ :id="item.id"
1011
+ :transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
1012
+ item.actual_bound.y + item.actual_bound.height / 2
1013
+ }) scale(${item.scale_x},${item.scale_y}) translate(${-(
1014
+ item.actual_bound.x +
1015
+ item.actual_bound.width / 2
1016
+ )},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
1017
+ />
1041
1018
  <component
1019
+ v-else-if="item.type === EDoneJsonType.CustomSvg"
1042
1020
  :is="item.tag"
1043
- v-bind="prosToVBind(item)"
1021
+ v-bind="prosToVBind(item, ['height', 'width'])"
1022
+ :width="item.props?.width?.val ?? 100"
1023
+ :height="item.props?.height?.val ?? 100"
1044
1024
  :id="item.id"
1025
+ @resize="resizeBox"
1045
1026
  :transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
1046
1027
  item.actual_bound.y + item.actual_bound.height / 2
1047
1028
  }) scale(${item.scale_x},${item.scale_y}) translate(${-(
1048
1029
  item.actual_bound.x +
1049
1030
  item.actual_bound.width / 2
1050
1031
  )},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
1051
- >{{ item.tag_slot }}
1052
- </component>
1053
- </foreignObject>
1032
+ />
1033
+ <foreignObject
1034
+ v-else-if="item.type === EDoneJsonType.Vue"
1035
+ v-bind="getActualBoundScale(item.actual_bound, item.scale_x, item.scale_y)"
1036
+ :id="`foreign-object${item.id}`"
1037
+ class="foreignObject"
1038
+ >
1039
+ <component
1040
+ :is="item.tag"
1041
+ v-bind="prosToVBind(item)"
1042
+ :id="item.id"
1043
+ :transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
1044
+ item.actual_bound.y + item.actual_bound.height / 2
1045
+ }) scale(${item.scale_x},${item.scale_y}) translate(${-(
1046
+ item.actual_bound.x +
1047
+ item.actual_bound.width / 2
1048
+ )},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
1049
+ >{{ item.tag_slot }}
1050
+ </component>
1051
+ </foreignObject>
1054
1052
 
1055
- <line
1056
- v-else-if="item.type === EDoneJsonType.StraightLine"
1057
- :id="item.id"
1058
- :x1="item.props.start_x.val"
1059
- :y1="item.props.start_y.val"
1060
- :x2="item.props.end_x.val"
1061
- :y2="item.props.end_y.val"
1062
- fill="#FF0000"
1063
- stroke="#FF0000"
1064
- stroke-width="2"
1065
- />
1066
- <rect
1067
- v-if="item.config.actual_rect"
1068
- :id="`rect${item.id}`"
1069
- fill="black"
1070
- fill-opacity="0"
1071
- v-bind="getActualBoundScale(item.actual_bound, item.scale_x, item.scale_y)"
1072
- style="stroke: none; stroke-width: 2; stroke-miterlimit: 10"
1073
- :class="{
1074
- 'svg-item-none':
1075
- !item.selected &&
1076
- (globalStore.intention == EGlobalStoreIntention.None ||
1077
- globalStore.intention == EGlobalStoreIntention.Select),
1078
- 'svg-item-move':
1079
- globalStore.intention == EGlobalStoreIntention.Move &&
1080
- globalStore.handle_svg_info?.info.id == item.id,
1081
- 'svg-item-select':
1082
- globalStore.intention == EGlobalStoreIntention.Select &&
1083
- globalStore.handle_svg_info?.info.id == item.id,
1084
- 'svg-item-in-group': item.selected
1085
- }"
1086
- />
1053
+ <line
1054
+ v-else-if="item.type === EDoneJsonType.StraightLine"
1055
+ :id="item.id"
1056
+ :x1="item.props.start_x.val"
1057
+ :y1="item.props.start_y.val"
1058
+ :x2="item.props.end_x.val"
1059
+ :y2="item.props.end_y.val"
1060
+ fill="#FF0000"
1061
+ stroke="#FF0000"
1062
+ stroke-width="2"
1063
+ />
1064
+ <rect
1065
+ v-if="item.config.actual_rect"
1066
+ :id="`rect${item.id}`"
1067
+ fill="black"
1068
+ fill-opacity="0"
1069
+ v-bind="getActualBoundScale(item.actual_bound, item.scale_x, item.scale_y)"
1070
+ style="stroke: none; stroke-width: 2; stroke-miterlimit: 10"
1071
+ :class="{
1072
+ 'svg-item-none':
1073
+ !item.selected &&
1074
+ (globalStore.intention == EGlobalStoreIntention.None ||
1075
+ globalStore.intention == EGlobalStoreIntention.Select),
1076
+ 'svg-item-move':
1077
+ globalStore.intention == EGlobalStoreIntention.Move &&
1078
+ globalStore.handle_svg_info?.info.id == item.id,
1079
+ 'svg-item-select':
1080
+ globalStore.intention == EGlobalStoreIntention.Select &&
1081
+ globalStore.handle_svg_info?.info.id == item.id,
1082
+ 'svg-item-in-group': item.selected
1083
+ }"
1084
+ />
1087
1085
 
1088
- <handle-panel
1089
- v-if="
1090
- globalStore.handle_svg_info?.info.id === item.id &&
1091
- visible_info.handle_panel &&
1092
- item.type !== EDoneJsonType.ConnectionLine
1093
- "
1094
- :item-info="item"
1095
- />
1096
- <connection-panel
1097
- @contextmenu="onCanvasContextMenuEvent"
1098
- v-if="
1099
- !item.selected &&
1100
- visible_info.select_item.info?.id == item.id &&
1101
- visible_info.connection_panel &&
1102
- item.config.have_anchor &&
1103
- globalStore.intention !== EGlobalStoreIntention.SelectArea &&
1104
- (globalStore.intention === EGlobalStoreIntention.Select
1105
- ? item.id !== globalStore.handle_svg_info?.info.id
1106
- : true)
1107
- "
1108
- :item-info="item"
1109
- />
1086
+ <handle-panel
1087
+ v-if="
1088
+ globalStore.handle_svg_info?.info.id === item.id &&
1089
+ visible_info.handle_panel &&
1090
+ item.type !== EDoneJsonType.ConnectionLine
1091
+ "
1092
+ :item-info="item"
1093
+ />
1094
+ <connection-panel
1095
+ @contextmenu="onCanvasContextMenuEvent"
1096
+ v-if="
1097
+ !item.selected &&
1098
+ visible_info.select_item.info?.id == item.id &&
1099
+ visible_info.connection_panel &&
1100
+ item.config.have_anchor &&
1101
+ globalStore.intention !== EGlobalStoreIntention.SelectArea &&
1102
+ (globalStore.intention === EGlobalStoreIntention.Select
1103
+ ? item.id !== globalStore.handle_svg_info?.info.id
1104
+ : true)
1105
+ "
1106
+ :item-info="item"
1107
+ />
1108
+ </g>
1110
1109
  </g>
1111
1110
  </g>
1111
+ <!--框选-->
1112
+ <rect
1113
+ :x="selectRect.x"
1114
+ :y="selectRect.y"
1115
+ :height="selectRect.height"
1116
+ :width="selectRect.with"
1117
+ stroke="#107cec"
1118
+ fill="#107cec"
1119
+ fill-opacity=".2"
1120
+ />
1112
1121
  </g>
1113
- <!--框选-->
1114
- <rect
1115
- :x="selectRect.x"
1116
- :y="selectRect.y"
1117
- :height="selectRect.height"
1118
- :width="selectRect.with"
1119
- stroke="#107cec"
1120
- fill="#107cec"
1121
- fill-opacity=".2"
1122
- />
1123
- </g>
1124
- </svg>
1122
+ </svg>
1123
+ </div>
1125
1124
  </div>
1126
1125
  <!-- 右键菜单 -->
1127
1126
  <ul ref="contextMenuRef" class="contextMenu" v-show="contextMenuStore.display">
package/src/components/svg-editor/index.vue CHANGED
@@ -154,7 +154,11 @@
154
154
  <el-main class="middle main">
155
155
  <div class="canvas-main-pc">
156
156
  <Vue3RulerTool class="canvas-main-pc" :visible="configStore.svg.ruler" @onLineMouseUp="onLineMouseUp">
157
- <center-panel ref="centerRef" :vueComp="props.vueComp" />
157
+ <center-panel ref="centerRef" :vueComp="props.vueComp">
158
+ <template #background>
159
+ <slot name="background" />
160
+ </template>
161
+ </center-panel>
158
162
  </Vue3RulerTool>
159
163
  </div>
160
164
  </el-main>
package/src/components/svg-editor/top-panel.vue CHANGED
@@ -153,7 +153,7 @@
153
153
  </el-icon>
154
154
  </div>
155
155
  </div>
156
- <el-dialog v-model="open" title="使用说明" width="60%" class="guide-dialog">
156
+ <el-dialog v-model="open" title="使用说明" width="60%">
157
157
  <el-scrollbar max-height="60vh">
158
158
  <div class="font-bold mb-10px text-15px guide-title" style="padding-top: 16px">多选</div>
159
159
  <div
@@ -232,18 +232,3 @@
232
232
  }
233
233
  }
234
234
  </style>
235
- <style lang="less">
236
- .guide-dialog {
237
- .el-dialog__header {
238
- background-color: #f1f1f5;
239
- margin-right: 0;
240
- padding-right: 16px;
241
- }
242
-
243
- .el-dialog__body {
244
- padding-top: 0;
245
- padding-bottom: 8px;
246
- padding-right: 8px;
247
- }
248
- }
249
- </style>
package/src/components/svg-viewer.vue CHANGED
@@ -279,83 +279,63 @@
279
279
  <template>
280
280
  <div
281
281
  class="canvas"
282
+ :style="{ backgroundColor: preview_data.config.svg.background_color, position: 'relative' }"
282
283
  @mousedown="onCanvasMouseDown"
283
284
  @mousemove="onCanvasMouseMove"
284
285
  @mouseup="onCanvasMouseUp"
285
286
  @mousewheel="onMousewheel"
286
287
  @contextmenu="preventDefault"
287
288
  >
288
- <svg
289
- xmlns="http://www.w3.org/2000/svg"
290
- :style="{ backgroundColor: preview_data.config.svg.background_color }"
291
- width="100%"
292
- height="100%"
293
- >
294
- <g
295
- :transform="`translate(${preview_data.layout_center.x},${preview_data.layout_center.y})rotate(${0})scale(${
296
- preview_data.config.svg.scale
297
- })`"
298
- >
289
+ <slot name="background" />
290
+ <div style="position: absolute; left: 0; top: 0; bottom: 0; right: 0">
291
+ <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
299
292
  <g
300
- v-for="item in preview_data.done_json"
301
- :key="item.id"
302
- :transform="`translate(${item.x},${item.y})rotate(0)scale(1)`"
303
- v-show="item.display"
304
- :style="getStyle(item)"
305
- @click="eventHandle(item, EEventType.Click)"
306
- @mousedown="stopEvent"
307
- @mousemove="stopEvent"
308
- @mouseup="stopEvent"
309
- @mousewheel="stopEvent"
293
+ :transform="`translate(${preview_data.layout_center.x},${preview_data.layout_center.y})rotate(${0})scale(${
294
+ preview_data.config.svg.scale
295
+ })`"
310
296
  >
311
- <g :class="`${getCommonClass(item)}`">
312
- <g
313
- :transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
314
- item.actual_bound.y + item.actual_bound.height / 2
315
- })rotate(${item.rotate}) scale(1) translate(${-(item.actual_bound.x + item.actual_bound.width / 2)},${-(
316
- item.actual_bound.y +
317
- item.actual_bound.height / 2
318
- )})`"
319
- >
320
- <connection-line v-if="item.type === EDoneJsonType.ConnectionLine" :item-info="item" />
321
- <use
322
- v-else-if="item.type === EDoneJsonType.File"
323
- :xlink:href="`#svg-${item.name}`"
324
- v-bind="prosToVBind(item, ['height', 'width'])"
325
- :width="item.props?.width?.val ?? 100"
326
- :height="item.props?.height?.val ?? 100"
327
- :id="item.id"
297
+ <g
298
+ v-for="item in preview_data.done_json"
299
+ :key="item.id"
300
+ :transform="`translate(${item.x},${item.y})rotate(0)scale(1)`"
301
+ v-show="item.display"
302
+ :style="getStyle(item)"
303
+ @click="eventHandle(item, EEventType.Click)"
304
+ @mousedown="stopEvent"
305
+ @mousemove="stopEvent"
306
+ @mouseup="stopEvent"
307
+ @mousewheel="stopEvent"
308
+ >
309
+ <g :class="`${getCommonClass(item)}`">
310
+ <g
328
311
  :transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
329
312
  item.actual_bound.y + item.actual_bound.height / 2
330
- }) scale(${item.scale_x},${item.scale_y}) translate(${-(
331
- item.actual_bound.x +
332
- item.actual_bound.width / 2
333
- )},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
334
- />
335
- <component
336
- v-else-if="item.type === EDoneJsonType.CustomSvg"
337
- :is="item.tag"
338
- v-bind="prosToVBind(item, ['height', 'width'])"
339
- :width="item.props?.width?.val ?? 100"
340
- :height="item.props?.height?.val ?? 100"
341
- :id="item.id"
342
- @on-change="eventHandle(item, EEventType.Change)"
343
- :transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
344
- item.actual_bound.y + item.actual_bound.height / 2
345
- }) scale(${item.scale_x},${item.scale_y}) translate(${-(
346
- item.actual_bound.x +
347
- item.actual_bound.width / 2
348
- )},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
349
- />
350
- <foreignObject
351
- v-else-if="item.type === EDoneJsonType.Vue"
352
- v-bind="getActualBoundScale(item.actual_bound, item.scale_x, item.scale_y)"
353
- :id="`foreign-object${item.id}`"
354
- class="foreignObject"
313
+ })rotate(${item.rotate}) scale(1) translate(${-(item.actual_bound.x + item.actual_bound.width / 2)},${-(
314
+ item.actual_bound.y +
315
+ item.actual_bound.height / 2
316
+ )})`"
355
317
  >
318
+ <connection-line v-if="item.type === EDoneJsonType.ConnectionLine" :item-info="item" />
319
+ <use
320
+ v-else-if="item.type === EDoneJsonType.File"
321
+ :xlink:href="`#svg-${item.name}`"
322
+ v-bind="prosToVBind(item, ['height', 'width'])"
323
+ :width="item.props?.width?.val ?? 100"
324
+ :height="item.props?.height?.val ?? 100"
325
+ :id="item.id"
326
+ :transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
327
+ item.actual_bound.y + item.actual_bound.height / 2
328
+ }) scale(${item.scale_x},${item.scale_y}) translate(${-(
329
+ item.actual_bound.x +
330
+ item.actual_bound.width / 2
331
+ )},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
332
+ />
356
333
  <component
334
+ v-else-if="item.type === EDoneJsonType.CustomSvg"
357
335
  :is="item.tag"
358
- v-bind="prosToVBind(item)"
336
+ v-bind="prosToVBind(item, ['height', 'width'])"
337
+ :width="item.props?.width?.val ?? 100"
338
+ :height="item.props?.height?.val ?? 100"
359
339
  :id="item.id"
360
340
  @on-change="eventHandle(item, EEventType.Change)"
361
341
  :transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
@@ -364,14 +344,33 @@
364
344
  item.actual_bound.x +
365
345
  item.actual_bound.width / 2
366
346
  )},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
367
- >{{ item.tag_slot }}
368
- </component>
369
- </foreignObject>
347
+ />
348
+ <foreignObject
349
+ v-else-if="item.type === EDoneJsonType.Vue"
350
+ v-bind="getActualBoundScale(item.actual_bound, item.scale_x, item.scale_y)"
351
+ :id="`foreign-object${item.id}`"
352
+ class="foreignObject"
353
+ >
354
+ <component
355
+ :is="item.tag"
356
+ v-bind="prosToVBind(item)"
357
+ :id="item.id"
358
+ @on-change="eventHandle(item, EEventType.Change)"
359
+ :transform="`translate(${item.actual_bound.x + item.actual_bound.width / 2},${
360
+ item.actual_bound.y + item.actual_bound.height / 2
361
+ }) scale(${item.scale_x},${item.scale_y}) translate(${-(
362
+ item.actual_bound.x +
363
+ item.actual_bound.width / 2
364
+ )},${-(item.actual_bound.y + item.actual_bound.height / 2)})`"
365
+ >{{ item.tag_slot }}
366
+ </component>
367
+ </foreignObject>
368
+ </g>
370
369
  </g>
371
370
  </g>
372
371
  </g>
373
- </g>
374
- </svg>
372
+ </svg>
373
+ </div>
375
374
  </div>
376
375
  </template>
377
376
 
package/src/views/EditorS.vue CHANGED
@@ -1,21 +1,21 @@
1
- <script setup lang="ts">
2
- import SvgEditor from '@/components/svg-editor/index.vue'
3
- import { useStore } from '@/stores/main'
4
- import type { IDataModel } from '@/components/svg-editor/types'
5
- import Preview from './Preview.vue'
6
-
7
- const store = useStore()
8
-
9
- const previewShow = ref(false)
10
- function previewHandle(d: IDataModel) {
11
- store.data = d
12
- nextTick(function () {
13
- previewShow.value = true
14
- })
15
- }
16
- </script>
17
-
18
- <template>
19
- <SvgEditor :data="(store.data && JSON.stringify(store.data)) || ''" @onPreview="previewHandle" saveFile />
20
- <Preview v-if="previewShow" @back="previewShow = false" />
21
- </template>
1
+ <script setup lang="ts">
2
+ import SvgEditor from '@/components/svg-editor/index.vue'
3
+ import { useStore } from '@/stores/main'
4
+ import type { IDataModel } from '@/components/svg-editor/types'
5
+ import Preview from './Preview.vue'
6
+
7
+ const store = useStore()
8
+
9
+ const previewShow = ref(false)
10
+ function previewHandle(d: IDataModel) {
11
+ store.data = d
12
+ nextTick(function () {
13
+ previewShow.value = true
14
+ })
15
+ }
16
+ </script>
17
+
18
+ <template>
19
+ <SvgEditor :data="(store.data && JSON.stringify(store.data)) || ''" @onPreview="previewHandle" saveFile />
20
+ <Preview v-if="previewShow" @back="previewShow = false" />
21
+ </template>