Merge pull request #7641 from dataease/pr@dev-v2@refactor_canvas

Pr@dev v2@refactor canvas

core/core-backend/pom.xml

@@ -101,6 +101,16 @@
                     <groupId>com.h2database</groupId>
                     <artifactId>h2</artifactId>
                 </dependency>
+                <dependency>
+                    <groupId>io.dataease</groupId>
+                    <artifactId>xpack-permissions</artifactId>
+                    <version>${project.version}</version>
+                </dependency>
+                <dependency>
+                    <groupId>io.dataease</groupId>
+                    <artifactId>xpack-base</artifactId>
+                    <version>${project.version}</version>
+                </dependency>
             </dependencies>
 
             <build>

core/core-frontend/src/components/visualization/common/ComponentPosition.vue

@@ -10,8 +10,8 @@
             :min="min"
             :max="max"
             :step="step"
-            v-model="curComponent.style[key]"
-            @change="onPositionChange"
+            v-model="positionMounted[key]"
+            @change="onPositionChange(key)"
             controls-position="right"
           />
         </el-form-item>
@@ -21,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { positionData } from '@/utils/attr'
 import { storeToRefs } from 'pinia'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
@@ -30,7 +30,13 @@ import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapsho
 const snapshotStore = snapshotStoreWithOut()
 
 const dvMainStore = dvMainStoreWithOut()
-const { curComponent } = storeToRefs(dvMainStore)
+const { curComponent, canvasStyleData } = storeToRefs(dvMainStore)
+const positionMounted = ref({
+  width: 0,
+  height: 0,
+  top: 0,
+  left: 0
+})
 
 withDefaults(
   defineProps<{
@@ -60,9 +66,33 @@ const positionKeysGroup = computed(() => {
   return _list
 })
 
-const onPositionChange = () => {
+const onPositionChange = key => {
+  curComponent.value.style[key] = Math.round(
+    (positionMounted.value[key] * canvasStyleData.value.scale) / 100
+  )
   snapshotStore.recordSnapshotCache()
 }
+
+const positionInit = () => {
+  if (curComponent.value) {
+    Object.keys(positionMounted.value).forEach(key => {
+      positionMounted.value[key] = Math.round(
+        (curComponent.value.style[key] * 100) / canvasStyleData.value.scale
+      )
+    })
+  }
+}
+
+watch(
+  () => curComponent.value,
+  () => {
+    positionInit()
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
 </script>
 
 <style lang="less" scoped>

core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue

@@ -92,15 +92,10 @@ const props = defineProps({
   themes: {
     type: String as PropType<EditorTheme>,
     default: 'dark'
-  },
-  canvasActive: {
-    type: Boolean,
-    required: false,
-    default: true
   }
 })
 
-const { scale, element, editMode, active, disabled, showPosition, canvasActive } = toRefs(props)
+const { scale, element, editMode, active, disabled, showPosition } = toRefs(props)
 
 const state = reactive({
   data: null,
@@ -132,7 +127,7 @@ const init = ref({
     '| bdmap indent2em lineheight formatpainter axupimgs',
   toolbar_location: '/',
   font_formats:
-    '微软雅黑=Microsoft YaHei;宋体=SimSun;黑体=SimHei;仿宋=FangSong;华文黑体=STHeiti;华文楷体=STKaiti;华文宋体=STSong;华文仿宋=STFangsong;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings',
+    '阿里巴巴普惠体=阿里巴巴普惠体 3.0 55 Regular L3;微软雅黑=Microsoft YaHei;宋体=SimSun;黑体=SimHei;仿宋=FangSong;华文黑体=STHeiti;华文楷体=STKaiti;华文宋体=STSong;华文仿宋=STFangsong;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings',
   fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', // 字体大小
   menubar: false,
   placeholder: '',
@@ -276,8 +271,16 @@ const showPlaceHolder = computed<boolean>(() => {
   )
 })
 
+const editActive = computed<boolean>(() => {
+  if (element.value.canvasId.includes('Group') && !active.value) {
+    return false
+  } else {
+    return true
+  }
+})
+
 const setEdit = () => {
-  if (computedCanEdit.value && canvasActive.value) {
+  if (computedCanEdit.value && editActive.value) {
     canEdit.value = true
     element.value['editing'] = true
     myValue.value = element.value.propValue.textValue