@zhangqingcq/vgce 0.1.9 → 0.1.10

Sign up to get free protection for your applications and to get access to all the features.
Files changed (10) hide show
  1. package/README.md +51 -13
  2. package/dist/style.css +1 -1
  3. package/dist/vgce.js +261 -250
  4. package/dist/vgce.umd.cjs +4 -4
  5. package/package.json +1 -1
  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-viewer.vue +68 -69
  9. package/src/views/EditorS.vue +21 -21
  10. 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.10",
4
4
  "description": "Vector graphics configure editor. svg组态编辑器。基于vue3.3+ts+element-plus+vite",
5
5
  "publishConfig": {
6
6
  "access": "public"
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-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>
package/src/views/Preview.vue CHANGED
@@ -1,38 +1,38 @@
1
- <script setup lang="ts">
2
- import SvgViewer from '@/components/svg-viewer.vue'
3
- import { ElButton } from 'element-plus'
4
- import { ArrowLeftBold } from '@element-plus/icons-vue'
5
- import { useStore } from '@/stores/main'
6
-
7
- const emit = defineEmits(['back'])
8
- const store = useStore()
9
-
10
- function back() {
11
- emit('back')
12
- }
13
- </script>
14
-
15
- <template>
16
- <div class="previewPage">
17
- <svg-viewer :data="store.data" />
18
- <el-button @click="back" class="backBtn" :icon="ArrowLeftBold">返回</el-button>
19
- </div>
20
- </template>
21
-
22
- <style lang="less" scoped>
23
- .previewPage {
24
- position: fixed;
25
- z-index: 1000;
26
- left: 0;
27
- right: 0;
28
- top: 0;
29
- bottom: 0;
30
-
31
- .backBtn {
32
- position: absolute;
33
- top: 20px;
34
- right: 30px;
35
- z-index: 100;
36
- }
37
- }
38
- </style>
1
+ <script setup lang="ts">
2
+ import SvgViewer from '@/components/svg-viewer.vue'
3
+ import { ElButton } from 'element-plus'
4
+ import { ArrowLeftBold } from '@element-plus/icons-vue'
5
+ import { useStore } from '@/stores/main'
6
+
7
+ const emit = defineEmits(['back'])
8
+ const store = useStore()
9
+
10
+ function back() {
11
+ emit('back')
12
+ }
13
+ </script>
14
+
15
+ <template>
16
+ <div class="previewPage">
17
+ <svg-viewer :data="store.data" />
18
+ <el-button @click="back" class="backBtn" :icon="ArrowLeftBold">返回</el-button>
19
+ </div>
20
+ </template>
21
+
22
+ <style lang="less" scoped>
23
+ .previewPage {
24
+ position: fixed;
25
+ z-index: 1000;
26
+ left: 0;
27
+ right: 0;
28
+ top: 0;
29
+ bottom: 0;
30
+
31
+ .backBtn {
32
+ position: absolute;
33
+ top: 20px;
34
+ right: 30px;
35
+ z-index: 100;
36
+ }
37
+ }
38
+ </style>