perf: editor

iacg-world · Sep 10, 2024 · 0cae993 · 0cae993
1 parent 881213d
commit 0cae993
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 12 deletions.
diff --git a/src/components/EditGroup.vue b/src/components/EditGroup.vue
@@ -54,7 +54,7 @@ const defaultEditGroups: GroupProps[] = [
 export default defineComponent({
   props: {
     props: {
-      type: Object as PropType<AllComponentProps>,
+      type: Object as PropType<Partial<AllComponentProps>>,
       required: true,
     },
     groups: {
@@ -83,7 +83,7 @@ export default defineComponent({
     })
     const editGroups = computed(() => {
       return newGroups.value.map((group) => {
-        const propsMap = {} as AllComponentProps
+        const propsMap = {} as Partial<AllComponentProps>
         group.items.forEach((item) => {
           const key = item as keyof AllComponentProps
           propsMap[key] = props.props[key]

diff --git a/src/components/EditWrapper.vue b/src/components/EditWrapper.vue
@@ -6,10 +6,10 @@
     :data-component-id="id"
     @click="onItemClick(id)"
     @mousedown="startMove"
-    :class="{ active: active && isEditing, hidden: hidden }"
+    :class="{ active: active && isEditing && !isLocked, hidden: hidden }"
   >
     <slot></slot>
-    <div class="resizers">
+    <div class="resizers" v-if="active && isEditing && !isLocked">
       <div
         class="resizer top-left"
         @mousedown.stop="startResize('top-left')"
@@ -58,6 +58,7 @@ export default defineComponent({
       type: String,
       required: true,
     },
+    isLocked: Boolean,
     active: {
       type: Boolean,
       default: false,
@@ -77,20 +78,19 @@ export default defineComponent({
     const editWrapper = ref<null | HTMLElement>(null)
 
     const onItemClick = (id: string) => {
-      if (store.state.editor.isEditing) {
+      if (isEditing.value) {
         context.emit('set-active', id)
       }
     }
     const onChangeEditStatus = (id: string) => {
-      const isEditing = store.state.editor.isEditing
       store.commit('clearClickTimeout')
-      store.commit('setEditStatus', !isEditing)
-      if (!isEditing) {
+      store.commit('setEditStatus', !isEditing.value)
+      if (!isEditing.value) {
         onItemClick(id)
       }
     }
     const removeEditComponent = (id: string) => {
-      if (store.state.editor.isEditing) {
+      if (isEditing.value) {
         context.emit('remove-component', id)
       }
     }
@@ -113,7 +113,9 @@ export default defineComponent({
       }
     }
     const startMove = (e: MouseEvent) => {
-      // e.preventDefault && e.preventDefault()
+      if (props.isLocked || !isEditing.value) {
+        return
+      }
       const currentElement = editWrapper.value
       if (currentElement) {
         const { left, top } = currentElement.getBoundingClientRect()

diff --git a/src/components/PropsTable.vue b/src/components/PropsTable.vue
@@ -57,7 +57,7 @@ export default defineComponent({
   name: 'props-table',
   props: {
     props: {
-      type: Object as PropType<AllComponentProps>,
+      type: Object as PropType<Partial<AllComponentProps>>,
       required: true,
     },
   },

diff --git a/src/views/EditorView.vue b/src/views/EditorView.vue
@@ -57,6 +57,7 @@
           <div class="preview-list" :class="{ 'canvas-fix': canvasFix }">
             <div class="body-container" id="canvas-area" :style="page.props">
               <edit-wrapper
+                :isLocked="currentElement?.isLocked"
                 @setActive="setActive"
                 @removeComponent="removeComponent"
                 @update-position="updatePosition"
@@ -115,7 +116,7 @@
               <div v-else>
                 <a-empty>
                   <template #description>
-                    <p>该元素被锁定，无法编辑</p>
+                    <p>该元素被锁定，只允许在画布编辑文字内容</p>
                   </template>
                 </a-empty>
               </div>