feat(editor): 新增已选组件、代码编辑、数据源及其子节点增量缩进配置

Tencent · Sep 4, 2024 · d0e3a7c · d0e3a7c
1 parent aba2a65
commit d0e3a7c
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 7 deletions.
diff --git a/packages/editor/src/Editor.vue b/packages/editor/src/Editor.vue
@@ -16,7 +16,13 @@
 
     <template #sidebar>
       <slot name="sidebar" :editorService="editorService">
-        <Sidebar :data="sidebar" :layer-content-menu="layerContentMenu" :custom-content-menu="customContentMenu">
+        <Sidebar
+          :data="sidebar"
+          :layer-content-menu="layerContentMenu"
+          :custom-content-menu="customContentMenu"
+          :indent="indent"
+          :next-level-indent-increment="nextLevelIndentIncrement"
+        >
           <template #layer-panel-header>
             <slot name="layer-panel-header"></slot>
           </template>

diff --git a/packages/editor/src/components/Tree.vue b/packages/editor/src/components/Tree.vue
@@ -1,7 +1,14 @@
 <template>
   <div class="m-editor-tree" @dragover="handleDragOver">
     <template v-if="data?.length">
-      <TreeNode v-for="item in data" :key="item.id" :data="item" :indent="indent" :node-status-map="nodeStatusMap">
+      <TreeNode
+        v-for="item in data"
+        :key="item.id"
+        :data="item"
+        :indent="indent"
+        :next-level-indent-increment="nextLevelIndentIncrement"
+        :node-status-map="nodeStatusMap"
+      >
         <template #tree-node-content="{ data: nodeData }">
           <slot name="tree-node-content" :data="nodeData"> </slot>
         </template>
@@ -57,6 +64,7 @@ withDefaults(
     data: TreeNodeData[];
     nodeStatusMap: Map<Id, LayerNodeStatus>;
     indent?: number;
+    nextLevelIndentIncrement?: number;
     emptyText?: string;
   }>(),
   {

diff --git a/packages/editor/src/components/TreeNode.vue b/packages/editor/src/components/TreeNode.vue
@@ -45,7 +45,7 @@
         :parent="data"
         :parentsId="[...parentsId, data.id]"
         :node-status-map="nodeStatusMap"
-        :indent="indent + 11"
+        :indent="indent + nextLevelIndentIncrement"
       >
         <template #tree-node-content="{ data: nodeData }">
           <slot name="tree-node-content" :data="nodeData"> </slot>
@@ -99,9 +99,11 @@ const props = withDefaults(
     parentsId?: Id[];
     nodeStatusMap: Map<Id, LayerNodeStatus>;
     indent?: number;
+    nextLevelIndentIncrement?: number;
   }>(),
   {
     indent: 0,
+    nextLevelIndentIncrement: 11,
     parentsId: () => [],
   },
 );

diff --git a/packages/editor/src/editorProps.ts b/packages/editor/src/editorProps.ts
@@ -80,6 +80,10 @@ export interface EditorProps {
   disabledStageOverlay?: boolean;
   /** 禁用属性配置面板右下角显示源码的按钮 */
   disabledShowSrc?: boolean;
+  /** 已选组件、代码编辑、数据源缩进配置 */
+  indent?: number;
+  /** 已选组件、代码编辑、数据源子节点缩进增量配置 */
+  nextLevelIndentIncrement?: number;
   /** 中间工作区域中画布渲染的内容 */
   render?: (stage: StageCore) => HTMLDivElement | void | Promise<HTMLDivElement | void>;
   /** 选中时会在画布上复制出一个大小相同的dom，实际拖拽的是这个dom，此方法用于干预这个dom的生成方式 */

diff --git a/packages/editor/src/layouts/sidebar/Sidebar.vue b/packages/editor/src/layouts/sidebar/Sidebar.vue
@@ -182,6 +182,8 @@ const props = withDefaults(
   defineProps<{
     data: SideBarData;
     layerContentMenu: (MenuButton | MenuComponent)[];
+    indent?: number;
+    nextLevelIndentIncrement?: number;
     customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
   }>(),
   {
@@ -234,6 +236,8 @@ const getItemConfig = (data: SideItem): SideComponent => {
       props: {
         layerContentMenu: props.layerContentMenu,
         customContentMenu: props.customContentMenu,
+        indent: props.indent,
+        nextLevelIndentIncrement: props.nextLevelIndentIncrement,
       },
       component: LayerPanel,
       slots: {},
@@ -244,6 +248,10 @@ const getItemConfig = (data: SideItem): SideComponent => {
       icon: EditPen,
       text: '代码编辑',
       component: CodeBlockListPanel,
+      props: {
+        indent: props.indent,
+        nextLevelIndentIncrement: props.nextLevelIndentIncrement,
+      },
       slots: {},
     },
     [SideItemKey.DATA_SOURCE]: {
@@ -252,6 +260,10 @@ const getItemConfig = (data: SideItem): SideComponent => {
       icon: Coin,
       text: '数据源',
       component: DataSourceListPanel,
+      props: {
+        indent: props.indent,
+        nextLevelIndentIncrement: props.nextLevelIndentIncrement,
+      },
       slots: {},
     },
   };

diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue b/packages/editor/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="{
@@ -45,6 +51,8 @@ defineOptions({
 });
 
 const props = defineProps<{
+  indent?: number;
+  nextLevelIndentIncrement?: number;
   customError?: (id: Id, errorType: CodeDeleteErrorType) => any;
 }>();
 

diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue b/packages/editor/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>
@@ -47,6 +54,8 @@ defineOptions({
 });
 
 defineProps<{
+  indent?: number;
+  nextLevelIndentIncrement?: number;
   customError?: (id: Id, errorType: CodeDeleteErrorType) => any;
 }>();
 

diff --git a/packages/editor/src/layouts/sidebar/data-source/DataSourceList.vue b/packages/editor/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="{
@@ -42,6 +48,11 @@ defineOptions({
   name: 'MEditorDataSourceList',
 });
 
+defineProps<{
+  indent?: number;
+  nextLevelIndentIncrement?: number;
+}>();
+
 const emit = defineEmits<{
   edit: [id: string];
   remove: [id: string];

diff --git a/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue b/packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue
@@ -29,7 +29,13 @@
     </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
@@ -61,6 +67,11 @@ defineOptions({
   name: 'MEditorDataSourceListPanel',
 });
 
+defineProps<{
+  indent?: number;
+  nextLevelIndentIncrement?: number;
+}>();
+
 const eventBus = inject<EventBus>('eventBus');
 const { dataSourceService } = inject<Services>('services') || {};
 

diff --git a/packages/editor/src/layouts/sidebar/layer/LayerPanel.vue b/packages/editor/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"
@@ -70,6 +72,8 @@ defineOptions({
 
 defineProps<{
   layerContentMenu: (MenuButton | MenuComponent)[];
+  indent?: number;
+  nextLevelIndentIncrement?: number;
   customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
 }>();