fix(editor): 首次选中组件后拖动,更新节点无效

Tencent · Mar 15, 2022 · dee685f · dee685f
1 parent 12de0f5
commit dee685f
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 33 deletions.
diff --git a/packages/editor/src/layouts/PropsPanel.vue b/packages/editor/src/layouts/PropsPanel.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, getCurrentInstance, inject, onMounted, ref, watchEffect } from 'vue';
+import { computed, defineComponent, getCurrentInstance, inject, onMounted, ref, watchEffect } from 'vue';
 import { ElMessage } from 'element-plus';
 
 import type { FormValue, MForm } from '@tmagic/form';
@@ -30,21 +30,16 @@ export default defineComponent({
  // ts类型应该是FormConfig， 但是打包时会出错，所以暂时用any
  const curFormConfig = ref<any>([]);
  const services = inject<Services>('services');
+ const node = computed(() => services?.editorService.get<MNode | null>('node'));
 
  const init = async () => {
- const node = services?.editorService.get<MNode | null>('node');
-
- if (!node) {
+ if (!node.value) {
  curFormConfig.value = [];
  return;
  }
 
- if (node.devconfig && node.style && !isNaN(+node.style.height) && !isNaN(+node.style.width)) {
- node.devconfig.ratio = node.style.height / node.style.width || 1;
- }
-
- values.value = node;
- const type = node.type || (node.items ? 'container' : 'text');
+ values.value = node.value;
+ const type = node.value.type || (node.value.items ? 'container' : 'text');
  curFormConfig.value = (await services?.propsService.getPropsConfig(type)) || [];
  };
 

diff --git a/packages/editor/src/services/editor.ts b/packages/editor/src/services/editor.ts
@@ -17,7 +17,7 @@
  */
 
 import { reactive, toRaw } from 'vue';
-import { cloneDeep } from 'lodash-es';
+import { cloneDeep, mergeWith } from 'lodash-es';
 import serialize from 'serialize-javascript';
 
 import type { Id, MApp, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';
@@ -31,7 +31,6 @@ import { LayerOffset, Layout } from '@editor/type';
 import {
  change2Fixed,
  COPY_STORAGE_KEY,
- defaults,
  Fixed2Other,
  getNodeIndex,
  initPosition,
@@ -292,7 +291,11 @@ class Editor extends BaseService {
 
  let newConfig = await this.toggleFixedPosition(toRaw(config), node, this.get<MApp>('root'));
 
- defaults(newConfig, node);
+ newConfig = mergeWith(node, newConfig, (objValue, srcValue) => {
+ if (Array.isArray(srcValue)) {
+ return srcValue;
+ }
+ });
 
  if (!newConfig.type) throw new Error('配置缺少type值');
 

diff --git a/packages/editor/src/utils/editor.ts b/packages/editor/src/utils/editor.ts
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { cloneDeep, random } from 'lodash-es';
+import { random } from 'lodash-es';
 
 import { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import { getNodePath, isPop } from '@tmagic/utils';
@@ -223,22 +223,3 @@ export const Fixed2Other = async (node: MNode, root: MApp, getLayout: (node: MNo
 
  return toRelative(node);
 };
-
-export const defaults = (object: any, source: any) => {
- let o = source;
- if (Array.isArray(object)) {
- o = object;
- }
-
- Object.entries(o).forEach(([key, value]: [string, any]) => {
- if (typeof object[key] === 'undefined') {
- object[key] = value;
- return;
- }
-
- if (value && typeof value !== 'string' && Object.keys(value).length) {
- object[key] = defaults(cloneDeep(object[key]), value);
- }
- });
- return object;
-};