@tmagic/editor 1.5.0-beta.0 → 1.5.0-beta.10

package/src/initService.ts

@@ -1,7 +1,16 @@
 import { onBeforeUnmount, reactive, toRaw, watch } from 'vue';
-import { cloneDeep } from 'lodash-es';
-
-import type { EventOption } from '@tmagic/core';
+import { cloneDeep, debounce } from 'lodash-es';
+
+import type {
+  CodeBlockContent,
+  DataSourceSchema,
+  EventOption,
+  Id,
+  MApp,
+  MNode,
+  MPage,
+  MPageFragment,
+} from '@tmagic/core';
 import {
   createCodeBlockTarget,
   createDataSourceCondTarget,
@@ -9,14 +18,12 @@ import {
   createDataSourceTarget,
   DepTargetType,
   Target,
-} from '@tmagic/dep';
-import type { CodeBlockContent, DataSourceSchema, Id, MApp, MNode, MPage, MPageFragment } from '@tmagic/schema';
-import { isPage } from '@tmagic/utils';
+} from '@tmagic/core';
+import { isPage, traverseNode } from '@tmagic/utils';
 
 import PropsPanel from './layouts/PropsPanel.vue';
 import { EditorProps } from './editorProps';
 import { Services } from './type';
-import { traverseNode } from './utils';
 
 export declare type LooseRequired<T> = {
   [P in string & keyof T]: T[P];
@@ -242,7 +249,7 @@ export const initServiceEvents = (
 
   const getApp = () => {
     const stage = editorService.get('stage');
-    return stage?.renderer.runtime?.getApp?.();
+    return stage?.renderer?.runtime?.getApp?.();
   };
 
   const updateDataSourceSchema = () => {
@@ -284,7 +291,7 @@ export const initServiceEvents = (
     }
   };
 
-  const collectedHandler = (nodes: MNode[], deep: boolean) => {
+  const collectedHandler = debounce((nodes: MNode[], deep: boolean) => {
     const root = editorService.get('root');
     const stage = editorService.get('stage');
 
@@ -328,7 +335,7 @@ export const initServiceEvents = (
           });
       });
     });
-  };
+  }, 300);
 
   depService.on('add-target', targetAddHandler);
   depService.on('remove-target', targetRemoveHandler);

package/src/layouts/AddPageBox.vue

@@ -22,7 +22,7 @@
 import { inject, toRaw } from 'vue';
 import { Plus } from '@element-plus/icons-vue';
 
-import { NodeType } from '@tmagic/schema';
+import { NodeType } from '@tmagic/core';
 
 import MIcon from '@editor/components/Icon.vue';
 import type { Services } from '@editor/type';

package/src/layouts/CodeEditor.vue

@@ -23,7 +23,7 @@ import serialize from 'serialize-javascript';
 import { TMagicButton } from '@tmagic/design';
 
 import MIcon from '@editor/components/Icon.vue';
-import { getConfig } from '@editor/utils/config';
+import { getEditorConfig } from '@editor/utils/config';
 import monaco from '@editor/utils/monaco-editor';
 
 defineOptions({
@@ -76,7 +76,7 @@ const toString = (v: string | any, language: string): string => {
   return value;
 };
 
-const parse = (v: string | any, language: string): any => {
+const parseCode = (v: string | any, language: string): any => {
   if (typeof v !== 'string') {
     return v;
   }
@@ -85,7 +85,7 @@ const parse = (v: string | any, language: string): any => {
     return JSON.parse(v);
   }
 
-  return getConfig('parseDSL')(v);
+  return getEditorConfig('parseDSL')(v);
 };
 
 let vsEditor: monaco.editor.IStandaloneCodeEditor | null = null;
@@ -149,7 +149,7 @@ const init = async () => {
       e.stopPropagation();
       const newValue = getEditorValue();
       values.value = newValue;
-      emit('save', props.parse ? parse(newValue, props.language) : newValue);
+      emit('save', props.parse ? parseCode(newValue, props.language) : newValue);
     }
   });
 
@@ -158,7 +158,7 @@ const init = async () => {
       const newValue = getEditorValue();
       if (values.value !== newValue) {
         values.value = newValue;
-        emit('save', props.parse ? parse(newValue, props.language) : newValue);
+        emit('save', props.parse ? parseCode(newValue, props.language) : newValue);
       }
     });
   }

package/src/layouts/Framework.vue

@@ -65,7 +65,7 @@ import { TMagicScrollbar } from '@tmagic/design';
 
 import SplitView from '@editor/components/SplitView.vue';
 import type { FrameworkSlots, GetColumnWidth, PageBarSortOptions, Services } from '@editor/type';
-import { getConfig } from '@editor/utils/config';
+import { getEditorConfig } from '@editor/utils/config';
 
 import PageBar from './page-bar/PageBar.vue';
 import AddPageBox from './AddPageBox.vue';
@@ -156,7 +156,7 @@ onBeforeUnmount(() => {
 
 const saveCode = (value: string) => {
   try {
-    const parseDSL = getConfig('parseDSL');
+    const parseDSL = getEditorConfig('parseDSL');
     editorService?.set('root', parseDSL(value));
   } catch (e: any) {
     console.error(e);

package/src/layouts/NavMenu.vue

@@ -10,7 +10,7 @@
 import { computed, inject, markRaw, onBeforeUnmount, onMounted, ref } from 'vue';
 import { Back, Delete, FullScreen, Grid, Memo, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons-vue';
 
-import { NodeType } from '@tmagic/schema';
+import { NodeType } from '@tmagic/core';
 
 import ToolButton from '@editor/components/ToolButton.vue';
 import { ColumnLayout, MenuBarData, MenuButton, MenuComponent, MenuItem, Services } from '@editor/type';

package/src/layouts/PropsPanel.vue

@@ -41,10 +41,10 @@
 import { computed, getCurrentInstance, inject, onBeforeUnmount, onMounted, ref, watchEffect } from 'vue';
 import { Document as DocumentIcon } from '@element-plus/icons-vue';
 
+import type { MNode } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
 import type { FormState, FormValue } from '@tmagic/form';
 import { MForm } from '@tmagic/form';
-import type { MNode } from '@tmagic/schema';
 
 import MIcon from '@editor/components/Icon.vue';
 import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';

package/src/layouts/page-bar/AddButton.vue

@@ -14,7 +14,7 @@
 import { computed, inject, toRaw } from 'vue';
 import { Plus } from '@element-plus/icons-vue';
 
-import { NodeType } from '@tmagic/schema';
+import { NodeType } from '@tmagic/core';
 
 import Icon from '@editor/components/Icon.vue';
 import type { Services } from '@editor/type';

package/src/layouts/page-bar/PageBar.vue

@@ -24,7 +24,13 @@
           </slot>
         </div>
 
-        <TMagicPopover popper-class="page-bar-popover" placement="top" :width="160" trigger="hover">
+        <TMagicPopover
+          popper-class="page-bar-popover"
+          placement="top"
+          trigger="hover"
+          :width="160"
+          :destroy-on-close="true"
+        >
           <div>
             <slot name="page-bar-popover" :page="item">
               <ToolButton
@@ -60,8 +66,8 @@
 import { computed, inject, ref, watch } from 'vue';
 import { CaretBottom, Delete, DocumentCopy } from '@element-plus/icons-vue';
 
+import { type Id, type MPage, type MPageFragment, NodeType } from '@tmagic/core';
 import { TMagicIcon, TMagicPopover } from '@tmagic/design';
-import { Id, type MPage, type MPageFragment, NodeType } from '@tmagic/schema';
 import { isPage, isPageFragment } from '@tmagic/utils';
 
 import ToolButton from '@editor/components/ToolButton.vue';

package/src/layouts/page-bar/PageBarScrollContainer.vue

@@ -36,7 +36,7 @@ import {
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue';
 import Sortable, { SortableEvent } from 'sortablejs';
 
-import { Id, NodeType } from '@tmagic/schema';
+import { Id, NodeType } from '@tmagic/core';
 
 import Icon from '@editor/components/Icon.vue';
 import type { PageBarSortOptions, Services } from '@editor/type';

package/src/layouts/page-bar/PageList.vue

@@ -4,7 +4,13 @@
     id="m-editor-page-bar-list-icon"
     class="m-editor-page-bar-item m-editor-page-bar-item-icon"
   >
-    <TMagicPopover popper-class="page-bar-popover" placement="top" :width="160" trigger="hover">
+    <TMagicPopover
+      popper-class="page-bar-popover"
+      placement="top"
+      trigger="hover"
+      :width="160"
+      :destroy-on-close="true"
+    >
       <div>
         <slot name="page-list-popover" :list="list">
           <ToolButton
@@ -31,8 +37,8 @@
 import { computed, inject } from 'vue';
 import { Files } from '@element-plus/icons-vue';
 
+import { Id, MPage, MPageFragment } from '@tmagic/core';
 import { TMagicIcon, TMagicPopover } from '@tmagic/design';
-import { Id, MPage, MPageFragment } from '@tmagic/schema';
 
 import ToolButton from '@editor/components/ToolButton.vue';
 import type { Services } from '@editor/type';

package/src/layouts/page-bar/SwitchTypeButton.vue

@@ -13,8 +13,8 @@
 </template>
 
 <script setup lang="ts">
+import { NodeType } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
-import { NodeType } from '@tmagic/schema';
 
 defineOptions({
   name: 'MEditorPageBarSwitchTypeButton',

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -111,7 +111,7 @@ const dragendHandler = () => {
     globalThis.clearTimeout(timeout);
     timeout = undefined;
   }
-  const doc = stage.value?.renderer.getDocument();
+  const doc = stage.value?.renderer?.getDocument();
   if (doc && stageOptions?.containerHighlightClassName) {
     removeClassNameByClassName(doc, stageOptions.containerHighlightClassName);
   }

package/src/layouts/sidebar/Sidebar.vue

@@ -148,7 +148,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, ref, watch } from 'vue';
+import { computed, inject, nextTick, ref, watch } from 'vue';
 import { Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
 
 import FloatingBox from '@editor/components/FloatingBox.vue';
@@ -180,8 +180,10 @@ defineOptions({
 
 const props = withDefaults(
   defineProps<{
-    data: SideBarData;
+    data?: SideBarData;
     layerContentMenu: (MenuButton | MenuComponent)[];
+    indent?: number;
+    nextLevelIndentIncrement?: number;
     customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
   }>(),
   {
@@ -196,7 +198,23 @@ const props = withDefaults(
 const services = inject<Services>('services');
 
 const columnLeftWidth = computed(() => services?.uiService.get('columnWidth')[ColumnLayout.LEFT] || 0);
-const { height: columnLeftHeight } = useEditorContentHeight();
+const { height: editorContentHeight } = useEditorContentHeight();
+const columnLeftHeight = ref(0);
+
+const unWatchEditorContentHeight = watch(
+  editorContentHeight,
+  (height) => {
+    if (height) {
+      columnLeftHeight.value = height * 0.5;
+      nextTick().then(() => {
+        unWatchEditorContentHeight();
+      });
+    }
+  },
+  {
+    immediate: true,
+  },
+);
 
 const activeTabName = ref(props.data?.status);
 
@@ -218,6 +236,8 @@ const getItemConfig = (data: SideItem): SideComponent => {
       props: {
         layerContentMenu: props.layerContentMenu,
         customContentMenu: props.customContentMenu,
+        indent: props.indent,
+        nextLevelIndentIncrement: props.nextLevelIndentIncrement,
       },
       component: LayerPanel,
       slots: {},
@@ -228,6 +248,10 @@ const getItemConfig = (data: SideItem): SideComponent => {
       icon: EditPen,
       text: '代码编辑',
       component: CodeBlockListPanel,
+      props: {
+        indent: props.indent,
+        nextLevelIndentIncrement: props.nextLevelIndentIncrement,
+      },
       slots: {},
     },
     [SideItemKey.DATA_SOURCE]: {
@@ -236,6 +260,10 @@ const getItemConfig = (data: SideItem): SideComponent => {
       icon: Coin,
       text: '数据源',
       component: DataSourceListPanel,
+      props: {
+        indent: props.indent,
+        nextLevelIndentIncrement: props.nextLevelIndentIncrement,
+      },
       slots: {},
     },
   };

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

@@ -1,5 +1,11 @@
 <template>
-  <Tree :data="codeList" :node-status-map="nodeStatusMap" @node-click="clickHandler">
+  <Tree
+    :data="codeList"
+    :node-status-map="nodeStatusMap"
+    :indent="indent"
+    :next-level-indent-increment="nextLevelIndentIncrement"
+    @node-click="clickHandler"
+  >
     <template #tree-node-label="{ data }">
       <div
         :class="{
@@ -28,9 +34,9 @@
 import { computed, inject } from 'vue';
 import { Close, Edit, View } from '@element-plus/icons-vue';
 
-import { DepTargetType } from '@tmagic/dep';
+import type { Id, MNode } from '@tmagic/core';
+import { DepTargetType } from '@tmagic/core';
 import { tMagicMessage, tMagicMessageBox, TMagicTooltip } from '@tmagic/design';
-import type { Id, MNode } from '@tmagic/schema';
 
 import Icon from '@editor/components/Icon.vue';
 import Tree from '@editor/components/Tree.vue';
@@ -45,6 +51,8 @@ defineOptions({
 });
 
 const props = defineProps<{
+  indent?: number;
+  nextLevelIndentIncrement?: number;
   customError?: (id: Id, errorType: CodeDeleteErrorType) => any;
 }>();
 

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

@@ -11,7 +11,14 @@
     </slot>
 
     <!-- 代码块列表 -->
-    <CodeBlockList ref="codeBlockList" :custom-error="customError" @edit="editCode" @remove="deleteCode">
+    <CodeBlockList
+      ref="codeBlockList"
+      :custom-error="customError"
+      :indent="indent"
+      :next-level-indent-increment="nextLevelIndentIncrement"
+      @edit="editCode"
+      @remove="deleteCode"
+    >
       <template #code-block-panel-tool="{ id, data }">
         <slot name="code-block-panel-tool" :id="id" :data="data"></slot>
       </template>
@@ -30,8 +37,8 @@
 <script setup lang="ts">
 import { computed, inject, ref } from 'vue';
 
+import type { Id } from '@tmagic/core';
 import { TMagicButton, TMagicScrollbar } from '@tmagic/design';
-import type { Id } from '@tmagic/schema';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
 import SearchInput from '@editor/components/SearchInput.vue';
@@ -47,6 +54,8 @@ defineOptions({
 });
 
 defineProps<{
+  indent?: number;
+  nextLevelIndentIncrement?: number;
   customError?: (id: Id, errorType: CodeDeleteErrorType) => any;
 }>();
 

package/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue

@@ -24,9 +24,9 @@
 <script setup lang="ts">
 import { inject, Ref, ref, watchEffect } from 'vue';
 
+import { DataSourceSchema } from '@tmagic/core';
 import { tMagicMessage } from '@tmagic/design';
 import { FormConfig, MFormBox } from '@tmagic/form';
-import { DataSourceSchema } from '@tmagic/schema';
 
 import FloatingBox from '@editor/components/FloatingBox.vue';
 import { useEditorContentHeight } from '@editor/hooks';

package/src/layouts/sidebar/data-source/DataSourceList.vue

@@ -1,5 +1,11 @@
 <template>
-  <Tree :data="list" :node-status-map="nodeStatusMap" @node-click="clickHandler">
+  <Tree
+    :data="list"
+    :node-status-map="nodeStatusMap"
+    :indent="indent"
+    :next-level-indent-increment="nextLevelIndentIncrement"
+    @node-click="clickHandler"
+  >
     <template #tree-node-label="{ data }">
       <div
         :class="{
@@ -27,9 +33,8 @@
 import { computed, inject } from 'vue';
 import { Close, Edit, View } from '@element-plus/icons-vue';
 
-import { DepTargetType } from '@tmagic/dep';
+import { DepData, DepTargetType, Id, MNode } from '@tmagic/core';
 import { tMagicMessageBox, TMagicTooltip } from '@tmagic/design';
-import { DepData, Id, MNode } from '@tmagic/schema';
 
 import Icon from '@editor/components/Icon.vue';
 import Tree from '@editor/components/Tree.vue';
@@ -43,6 +48,11 @@ defineOptions({
   name: 'MEditorDataSourceList',
 });
 
+defineProps<{
+  indent?: number;
+  nextLevelIndentIncrement?: number;
+}>();
+
 const emit = defineEmits<{
   edit: [id: string];
   remove: [id: string];

package/src/layouts/sidebar/data-source/DataSourceListPanel.vue

@@ -2,30 +2,40 @@
   <TMagicScrollbar class="data-source-list-panel m-editor-layer-panel">
     <div class="search-wrapper">
       <SearchInput @search="filterTextChangeHandler"></SearchInput>
-      <TMagicPopover v-if="editable" placement="right">
+      <TMagicPopover
+        v-if="editable"
+        placement="right"
+        trigger="hover"
+        popper-class="data-source-list-panel-add-menu"
+        :destroy-on-close="true"
+      >
         <template #reference>
           <TMagicButton type="primary" size="small">新增</TMagicButton>
         </template>
-        <div class="data-source-list-panel-add-menu">
-          <ToolButton
-            v-for="(item, index) in datasourceTypeList"
-            :data="{
-              type: 'button',
-              text: item.text,
-              handler: () => {
-                addHandler(item.type);
-              },
-            }"
-            :key="index"
-          ></ToolButton>
-        </div>
+        <ToolButton
+          v-for="(item, index) in datasourceTypeList"
+          :data="{
+            type: 'button',
+            text: item.text,
+            handler: () => {
+              addHandler(item.type);
+            },
+          }"
+          :key="index"
+        ></ToolButton>
       </TMagicPopover>
 
       <slot name="data-source-panel-search"></slot>
     </div>
 
     <!-- 数据源列表 -->
-    <DataSourceList ref="dataSourceList" @edit="editHandler" @remove="removeHandler"></DataSourceList>
+    <DataSourceList
+      ref="dataSourceList"
+      :indent="indent"
+      :next-level-indent-increment="nextLevelIndentIncrement"
+      @edit="editHandler"
+      @remove="removeHandler"
+    ></DataSourceList>
   </TMagicScrollbar>
 
   <DataSourceConfigPanel
@@ -57,6 +67,11 @@ defineOptions({
   name: 'MEditorDataSourceListPanel',
 });
 
+defineProps<{
+  indent?: number;
+  nextLevelIndentIncrement?: number;
+}>();
+
 const eventBus = inject<EventBus>('eventBus');
 const { dataSourceService } = inject<Services>('services') || {};
 

package/src/layouts/sidebar/layer/LayerNodeTool.vue

@@ -9,7 +9,7 @@
 import { inject } from 'vue';
 import { Hide, View } from '@element-plus/icons-vue';
 
-import type { MNode } from '@tmagic/schema';
+import type { MNode } from '@tmagic/core';
 
 import MIcon from '@editor/components/Icon.vue';
 import { Services } from '@editor/type';

package/src/layouts/sidebar/layer/LayerPanel.vue

@@ -10,6 +10,8 @@
       ref="tree"
       :data="nodeData"
       :node-status-map="nodeStatusMap"
+      :indent="indent"
+      :next-level-indent-increment="nextLevelIndentIncrement"
       @node-dragover="handleDragOver"
       @node-dragstart="handleDragStart"
       @node-dragleave="handleDragLeave"
@@ -47,8 +49,8 @@
 <script setup lang="ts">
 import { computed, inject, ref } from 'vue';
 
+import type { MNode } from '@tmagic/core';
 import { TMagicScrollbar } from '@tmagic/design';
-import type { MNode } from '@tmagic/schema';
 
 import SearchInput from '@editor/components/SearchInput.vue';
 import Tree from '@editor/components/Tree.vue';
@@ -70,6 +72,8 @@ defineOptions({
 
 defineProps<{
   layerContentMenu: (MenuButton | MenuComponent)[];
+  indent?: number;
+  nextLevelIndentIncrement?: number;
   customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
 }>();
 

package/src/layouts/sidebar/layer/use-click.ts

@@ -1,7 +1,7 @@
 import { computed, type ComputedRef, nextTick, type Ref, ref } from 'vue';
 import { throttle } from 'lodash-es';
 
-import { Id, MNode } from '@tmagic/schema';
+import { Id, MNode } from '@tmagic/core';
 import { isPage, isPageFragment } from '@tmagic/utils';
 
 import { LayerNodeStatus, Services, TreeNodeData, UI_SELECT_MODE_EVENT_NAME } from '@editor/type';

package/src/layouts/sidebar/layer/use-drag.ts

@@ -1,4 +1,4 @@
-import type { Id, MContainer, MNode } from '@tmagic/schema';
+import type { Id, MContainer, MNode } from '@tmagic/core';
 import { addClassName, removeClassName } from '@tmagic/utils';
 
 import { DragType, type Services } from '@editor/type';

package/src/layouts/sidebar/layer/use-node-status.ts

@@ -1,10 +1,9 @@
 import { computed, ref, watch } from 'vue';
 
-import type { Id, MNode, MPage, MPageFragment } from '@tmagic/schema';
-import { getNodePath, isPage, isPageFragment } from '@tmagic/utils';
+import type { Id, MNode, MPage, MPageFragment } from '@tmagic/core';
+import { getNodePath, isPage, isPageFragment, traverseNode } from '@tmagic/utils';
 
-import { LayerNodeStatus, Services } from '@editor/type';
-import { traverseNode } from '@editor/utils';
+import type { LayerNodeStatus, Services } from '@editor/type';
 import { updateStatus } from '@editor/utils/tree';
 
 const createPageNodeStatus = (page: MPage | MPageFragment, initialLayerNodeStatus?: Map<Id, LayerNodeStatus>) => {

package/src/layouts/workspace/Breadcrumb.vue

@@ -10,8 +10,8 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
+import type { MNode } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
-import type { MNode } from '@tmagic/schema';
 import { getNodePath } from '@tmagic/utils';
 
 import type { Services } from '@editor/type';

package/src/layouts/workspace/viewer/NodeListMenu.vue

@@ -24,8 +24,8 @@
 <script lang="ts" setup>
 import { computed, inject, nextTick, ref, watch } from 'vue';
 
+import type { MNode } from '@tmagic/core';
 import { TMagicTooltip } from '@tmagic/design';
-import type { MNode } from '@tmagic/schema';
 import { getIdFromEl } from '@tmagic/utils';
 
 import FloatingBox from '@editor/components/FloatingBox.vue';
@@ -61,7 +61,7 @@ const unWatch = watch(
     nextTick(() => unWatch());
 
     stage.on('select', (el: HTMLElement, event: MouseEvent) => {
-      const els = stage.renderer.getElementsFromPoint(event) || [];
+      const els = stage.renderer?.getElementsFromPoint(event) || [];
       const ids = els.map((el) => getIdFromEl()(el)).filter((id) => Boolean(id)) as string[];
 
       buttonVisible.value = ids.length > 3;