@tmagic/editor 1.2.0 → 1.2.2

package/src/layouts/sidebar/code-block/CodeBlockList.vue

@@ -78,7 +78,7 @@
     </TMagicScrollbar>
 
     <!-- 代码块编辑区 -->
-    <code-block-editor v-if="isShowCodeBlockEditor">
+    <code-block-editor v-if="isShowCodeBlockEditor" :paramsColConfig="paramsColConfig">
       <template #code-block-edit-panel-header="{ id }">
         <slot name="code-block-edit-panel-header" :id="id"></slot>
       </template>
@@ -92,17 +92,18 @@ import { Close, Edit, Link, View } from '@element-plus/icons-vue';
 import { cloneDeep, forIn, isEmpty } from 'lodash-es';
 
 import { TMagicButton, TMagicInput, tMagicMessage, TMagicScrollbar, TMagicTooltip, TMagicTree } from '@tmagic/design';
+import { ColumnConfig } from '@tmagic/form';
 import { CodeBlockContent, Id } from '@tmagic/schema';
-import StageCore from '@tmagic/stage';
 
 import Icon from '../../../components/Icon.vue';
 import type { CodeRelation, Services } from '../../../type';
-import { CodeDeleteErrorType, CodeDslItem, CodeEditorMode, ListState } from '../../../type';
+import { CodeDeleteErrorType, CodeDslItem, ListState } from '../../../type';
 
 import codeBlockEditor from './CodeBlockEditor.vue';
 
 const props = defineProps<{
   customError?: (id: Id, errorType: CodeDeleteErrorType) => any;
+  paramsColConfig?: ColumnConfig;
 }>();
 
 const services = inject<Services>('services');
@@ -169,7 +170,6 @@ const createCodeBlock = async () => {
     content: `({app, params}) => {\n  // place your code here\n}`,
     params: [],
   };
-  await codeBlockService.setMode(CodeEditorMode.EDITOR);
   const id = await codeBlockService.getUniqueId();
   await codeBlockService.setCodeDslById(id, codeConfig);
   codeBlockService.setCodeEditorContent(true, id);
@@ -177,7 +177,6 @@ const createCodeBlock = async () => {
 
 // 编辑代码块
 const editCode = async (key: Id) => {
-  await services?.codeBlockService.setMode(CodeEditorMode.EDITOR);
   services?.codeBlockService.setCodeEditorContent(true, key);
 };
 
@@ -228,7 +227,7 @@ const getCompName = (compId: Id): string => {
 
 // 选中组件
 const selectComp = (compId: Id) => {
-  const stage = services?.editorService.get<StageCore | null>('stage');
+  const stage = services?.editorService.get('stage');
   services?.editorService.select(compId);
   stage?.select(compId);
 };

package/src/layouts/workspace/Breadcrumb.vue

@@ -11,8 +11,7 @@
 import { computed, inject } from 'vue';
 
 import { TMagicButton } from '@tmagic/design';
-import type { MApp, MNode } from '@tmagic/schema';
-import type StageCore from '@tmagic/stage';
+import type { MNode } from '@tmagic/schema';
 import { getNodePath } from '@tmagic/utils';
 
 import type { Services } from '../../type';
@@ -20,13 +19,13 @@ import type { Services } from '../../type';
 const services = inject<Services>('services');
 const editorService = services?.editorService;
 
-const node = computed(() => editorService?.get<MNode>('node'));
-const nodes = computed(() => editorService?.get<MNode[]>('nodes') || []);
-const root = computed(() => editorService?.get<MApp>('root'));
+const node = computed(() => editorService?.get('node'));
+const nodes = computed(() => editorService?.get('nodes') || []);
+const root = computed(() => editorService?.get('root'));
 const path = computed(() => getNodePath(node.value?.id || '', root.value?.items || []));
 
 const select = async (node: MNode) => {
   await editorService?.select(node);
-  editorService?.get<StageCore>('stage')?.select(node.id);
+  editorService?.get('stage')?.select(node.id);
 };
 </script>

package/src/layouts/workspace/PageBar.vue

@@ -51,7 +51,7 @@ import { computed, inject } from 'vue';
 import { CaretBottom, Delete, DocumentCopy } from '@element-plus/icons-vue';
 
 import { TMagicIcon, TMagicPopover, TMagicTooltip } from '@tmagic/design';
-import type { MApp, MPage } from '@tmagic/schema';
+import type { MPage } from '@tmagic/schema';
 
 import ToolButton from '../../components/ToolButton.vue';
 import type { Services } from '../../type';
@@ -61,7 +61,7 @@ import PageBarScrollContainer from './PageBarScrollContainer.vue';
 const services = inject<Services>('services');
 const editorService = services?.editorService;
 
-const root = computed(() => editorService?.get<MApp>('root'));
+const root = computed(() => editorService?.get('root'));
 
 const page = computed(() => editorService?.get('page'));
 

package/src/layouts/workspace/PageBarScrollContainer.vue

@@ -100,7 +100,7 @@ const scroll = (type: 'left' | 'right' | 'start' | 'end') => {
   itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
 };
 
-const pageLength = computed(() => editorService?.get<number>('pageLength'));
+const pageLength = computed(() => editorService?.get('pageLength'));
 
 watch(pageLength, (length = 0, preLength = 0) => {
   setTimeout(() => {
@@ -115,9 +115,11 @@ watch(pageLength, (length = 0, preLength = 0) => {
 
 const addPage = () => {
   if (!editorService) return;
+  const root = toRaw(editorService.get('root'));
+  if (!root) throw new Error('root 不能为空');
   const pageConfig = {
     type: NodeType.PAGE,
-    name: generatePageNameByApp(toRaw(editorService.get('root'))),
+    name: generatePageNameByApp(root),
   };
   editorService.add(pageConfig);
 };

package/src/layouts/workspace/Stage.vue

@@ -30,11 +30,11 @@
 import { computed, inject, markRaw, nextTick, onMounted, onUnmounted, ref, toRaw, watch, watchEffect } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
-import type { MApp, MContainer, MNode, MPage } from '@tmagic/schema';
+import type { MContainer } from '@tmagic/schema';
 import StageCore, { calcValueByFontsize, getOffset, Runtime } from '@tmagic/stage';
 
 import ScrollViewer from '../../components/ScrollViewer.vue';
-import { Layout, MenuButton, MenuComponent, Services, StageOptions, StageRect } from '../../type';
+import { Layout, MenuButton, MenuComponent, Services, StageOptions } from '../../type';
 import { useStage } from '../../utils/stage';
 
 import ViewerMenu from './ViewerMenu.vue';
@@ -53,13 +53,14 @@ const stageWrap = ref<InstanceType<typeof ScrollViewer>>();
 const stageContainer = ref<HTMLDivElement>();
 const menu = ref<InstanceType<typeof ViewerMenu>>();
 
-const isMultiSelect = computed(() => services?.editorService.get('nodes')?.length > 1);
-const stageRect = computed(() => services?.uiService.get<StageRect>('stageRect'));
-const stageContainerRect = computed(() => services?.uiService.get<StageRect>('stageContainerRect'));
-const root = computed(() => services?.editorService.get<MApp>('root'));
-const page = computed(() => services?.editorService.get<MPage>('page'));
-const zoom = computed(() => services?.uiService.get<number>('zoom') || 1);
-const node = computed(() => services?.editorService.get<MNode>('node'));
+const nodes = computed(() => services?.editorService.get('nodes') || []);
+const isMultiSelect = computed(() => nodes.value.length > 1);
+const stageRect = computed(() => services?.uiService.get('stageRect'));
+const stageContainerRect = computed(() => services?.uiService.get('stageContainerRect'));
+const root = computed(() => services?.editorService.get('root'));
+const page = computed(() => services?.editorService.get('page'));
+const zoom = computed(() => services?.uiService.get('zoom') || 1);
+const node = computed(() => services?.editorService.get('node'));
 
 watchEffect(() => {
   if (stage || !page.value) return;
@@ -142,7 +143,7 @@ const dropHandler = async (e: DragEvent) => {
   const doc = stage?.renderer.contentWindow?.document;
   const parentEl: HTMLElement | null | undefined = doc?.querySelector(`.${stageOptions?.containerHighlightClassName}`);
 
-  let parent: MContainer | undefined = page.value;
+  let parent: MContainer | undefined | null = page.value;
   if (parentEl) {
     parent = services?.editorService.getNodeById(parentEl.id, false) as MContainer;
   }

package/src/layouts/workspace/ViewerMenu.vue

@@ -6,8 +6,7 @@
 import { computed, inject, markRaw, ref, watch } from 'vue';
 import { Bottom, CopyDocument, Delete, DocumentCopy, Top } from '@element-plus/icons-vue';
 
-import { MNode, NodeType } from '@tmagic/schema';
-import StageCore from '@tmagic/stage';
+import { NodeType } from '@tmagic/schema';
 import { isPage } from '@tmagic/utils';
 
 import ContentMenu from '../../components/ContentMenu.vue';
@@ -26,10 +25,10 @@ const menu = ref<InstanceType<typeof ContentMenu>>();
 const canPaste = ref(false);
 const canCenter = ref(false);
 
-const node = computed(() => editorService?.get<MNode>('node'));
-const nodes = computed(() => editorService?.get<MNode[]>('nodes'));
+const node = computed(() => editorService?.get('node'));
+const nodes = computed(() => editorService?.get('nodes'));
 const parent = computed(() => editorService?.get('parent'));
-const stage = computed(() => editorService?.get<StageCore>('stage'));
+const stage = computed(() => editorService?.get('stage'));
 
 const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
   {
@@ -129,7 +128,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
     type: 'button',
     text: '清空参考线',
     handler: () => {
-      editorService?.get<StageCore>('stage').clearGuides();
+      editorService?.get('stage')?.clearGuides();
     },
   },
   ...props.stageContentMenu,

package/src/layouts/workspace/Workspace.vue

@@ -19,7 +19,6 @@
 import { computed, inject, onMounted, onUnmounted, ref } from 'vue';
 import KeyController from 'keycon';
 
-import type { MNode, MPage } from '@tmagic/schema';
 import { isPage } from '@tmagic/utils';
 
 import type { MenuButton, MenuComponent, Services } from '../../type';
@@ -34,8 +33,8 @@ defineProps<{
 
 const services = inject<Services>('services');
 const workspace = ref<HTMLDivElement>();
-const nodes = computed(() => services?.editorService.get<MNode[]>('nodes'));
-const page = computed(() => services?.editorService.get<MPage>('page'));
+const nodes = computed(() => services?.editorService.get('nodes'));
+const page = computed(() => services?.editorService.get('page'));
 
 const mouseenterHandler = () => {
   workspace.value?.focus();

package/src/services/BaseService.ts

@@ -1,7 +1,7 @@
 /*
  * Tencent is pleased to support the open source community by making TMagicEditor available.
  *
- * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

package/src/services/codeBlock.ts

@@ -1,7 +1,7 @@
 /*
  * Tencent is pleased to support the open source community by making TMagicEditor available.
  *
- * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,11 +19,11 @@
 import { reactive } from 'vue';
 import { cloneDeep, forIn, isEmpty, keys, omit, pick } from 'lodash-es';
 
-import { CodeBlockContent, CodeBlockDSL, HookType, Id, MApp, MNode } from '@tmagic/schema';
+import { CodeBlockContent, CodeBlockDSL, HookType, Id, MNode } from '@tmagic/schema';
 
 import editorService from '../services/editor';
 import type { CodeRelation, CodeState, HookData } from '../type';
-import { CODE_DRAFT_STORAGE_KEY, CodeEditorMode } from '../type';
+import { CODE_DRAFT_STORAGE_KEY } from '../type';
 import { info } from '../utils/logger';
 
 import BaseService from './BaseService';
@@ -34,7 +34,6 @@ class CodeBlock extends BaseService {
     codeDsl: null,
     id: '',
     editable: true,
-    mode: CodeEditorMode.EDITOR,
     combineIds: [],
     undeletableList: [],
     relations: {},
@@ -50,7 +49,6 @@ class CodeBlock extends BaseService {
       'setCodeDslById',
       'setCodeEditorShowStatus',
       'setEditStatus',
-      'setMode',
       'setCombineIds',
       'setUndeleteableList',
       'deleteCodeDslByIds',
@@ -214,23 +212,6 @@ class CodeBlock extends BaseService {
     return this.state.id;
   }
 
-  /**
-   * 获取当前模式
-   * @returns {CodeEditorMode}
-   */
-  public getMode(): CodeEditorMode {
-    return this.state.mode;
-  }
-
-  /**
-   * 设置当前模式
-   * @param {CodeEditorMode} mode 模式
-   * @returns {void}
-   */
-  public async setMode(mode: CodeEditorMode): Promise<void> {
-    this.state.mode = mode;
-  }
-
   /**
    * 设置当前选中组件已关联绑定的代码块id数组
    * @param {string[]} ids 代码块id数组
@@ -253,7 +234,7 @@ class CodeBlock extends BaseService {
    * @returns {CodeRelation | null}
    */
   public refreshCombineInfo(): CodeRelation | null {
-    const root = editorService.get<MApp | null>('root');
+    const root = editorService.get('root');
     if (!root) return null;
     const relations = {};
     this.recurseMNode(root, relations);
@@ -349,7 +330,6 @@ class CodeBlock extends BaseService {
     this.state.codeDsl = null;
     this.state.id = '';
     this.state.editable = true;
-    this.state.mode = CodeEditorMode.EDITOR;
     this.state.combineIds = [];
     this.state.undeletableList = [];
   }
@@ -386,6 +366,7 @@ class CodeBlock extends BaseService {
    */
   private recurseMNode(node: MNode, relations: CodeRelation): void {
     forIn(node, (value, key) => {
+      let unConfirmedValue: MNode = { id: node.id };
       if (value?.hookType === HookType.CODE && !isEmpty(value.hookData)) {
         value.hookData.forEach((relationItem: HookData) => {
           // continue
@@ -399,6 +380,16 @@ class CodeBlock extends BaseService {
           }
           codeItem[node.id].push(key);
         });
+        // continue
+        return;
+      }
+      if (typeof value === 'object') {
+        // 检查value内部是否有嵌套
+        unConfirmedValue = {
+          ...unConfirmedValue,
+          ...value,
+        };
+        this.recurseMNode(unConfirmedValue, relations);
       }
     });
     if (!isEmpty(node.items)) {

package/src/services/componentList.ts

@@ -1,7 +1,7 @@
 /*
  * Tencent is pleased to support the open source community by making TMagicEditor available.
  *
- * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.