@tmagic/editor 1.3.0-alpha.9 → 1.3.0-beta.0

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

@@ -2,122 +2,110 @@
   <TMagicScrollbar class="data-source-list-panel m-editor-dep-list-panel">
     <div class="search-wrapper">
       <SearchInput @search="filterTextChangeHandler"></SearchInput>
-      <TMagicButton type="primary" size="small" @click="addHandler">新增</TMagicButton>
+      <TMagicPopover v-if="editable" placement="right">
+        <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>
+      </TMagicPopover>
     </div>
 
     <!-- 数据源列表 -->
-    <TMagicTree
-      ref="tree"
-      class="magic-editor-layer-tree"
-      node-key="id"
-      empty-text="暂无代码块"
-      default-expand-all
-      :expand-on-click-node="false"
-      :data="list"
-      :highlight-current="true"
-      @node-click="clickHandler"
-    >
-      <template #default="{ data }">
-        <div :id="data.id" class="list-container">
-          <div class="list-item">
-            <Icon v-if="data.type === 'code'" class="codeIcon" :icon="Coin"></Icon>
-            <Icon v-if="data.type === 'node'" class="compIcon" :icon="Aim"></Icon>
-            <span class="name" :class="{ code: data.type === 'code', hook: data.type === 'key' }"
-              >{{ data.name }}（{{ data.id }}）</span
-            >
-            <!-- 右侧工具栏 -->
-            <div class="right-tool" v-if="data.type === 'code'">
-              <TMagicTooltip effect="dark" content="编辑" placement="bottom">
-                <Icon class="edit-icon" :icon="Edit" @click.stop="editHandler(`${data.id}`)"></Icon>
-              </TMagicTooltip>
-              <TMagicTooltip effect="dark" content="删除" placement="bottom">
-                <Icon :icon="Close" class="edit-icon" @click.stop="removeHandler(`${data.id}`)"></Icon>
-              </TMagicTooltip>
-              <slot name="data-source-panel-tool" :id="data.id" :data="data.codeBlockContent"></slot>
-            </div>
-          </div>
-        </div>
-      </template>
-    </TMagicTree>
+    <DataSourceList @edit="editHandler" @remove="removeHandler"></DataSourceList>
 
     <DataSourceConfigPanel
       ref="editDialog"
+      :disabled="!editable"
       :values="dataSourceValues"
-      :title="typeof dataSourceValues.id !== 'undefined' ? `编辑${dataSourceValues.title}` : '新增'"
+      :title="dialogTitle"
       @submit="submitDataSourceHandler"
     ></DataSourceConfigPanel>
   </TMagicScrollbar>
 </template>
 
-<script setup lang="ts" name="MEditorDataSourceListPanel">
+<script setup lang="ts">
 import { computed, inject, ref } from 'vue';
-import { Aim, Close, Coin, Edit } from '@element-plus/icons-vue';
+import { mergeWith } from 'lodash-es';
 
-import { TMagicButton, tMagicMessageBox, TMagicScrollbar, TMagicTooltip, TMagicTree } from '@tmagic/design';
-import { DataSourceSchema, Id } from '@tmagic/schema';
+import { TMagicButton, TMagicPopover, TMagicScrollbar } from '@tmagic/design';
+import type { DataSourceSchema } from '@tmagic/schema';
 
-import Icon from '@editor/components/Icon.vue';
 import SearchInput from '@editor/components/SearchInput.vue';
+import ToolButton from '@editor/components/ToolButton.vue';
 import type { Services } from '@editor/type';
 
 import DataSourceConfigPanel from './DataSourceConfigPanel.vue';
+import DataSourceList from './DataSourceList.vue';
 
 defineOptions({
   name: 'MEditorDataSourceListPanel',
 });
 
-const services = inject<Partial<Services>>('services', {});
-const { dataSourceService, depService, editorService } = inject<Services>('services') || {};
-
-const list = computed(() =>
-  Object.values(depService?.targets['data-source'] || {}).map((target) => ({
-    id: target.id,
-    name: target.name,
-    type: 'code',
-    children: Object.entries(target.deps).map(([id, dep]) => ({
-      name: dep.name,
-      type: 'node',
-      id,
-      children: dep.keys.map((key) => ({ name: key, id: key, type: 'key' })),
-    })),
-  })),
-);
+const { dataSourceService } = inject<Services>('services') || {};
 
 const editDialog = ref<InstanceType<typeof DataSourceConfigPanel>>();
 
 const dataSourceValues = ref<Record<string, any>>({});
 
-const addHandler = () => {
+const dialogTitle = ref('');
+
+const editable = computed(() => dataSourceService?.get('editable') ?? true);
+const datasourceTypeList = computed(() =>
+  [
+    { text: '基础', type: 'base' },
+    { text: 'HTTP', type: 'http' },
+  ].concat(dataSourceService?.get('datasourceTypeList') ?? []),
+);
+
+const addHandler = (type: string) => {
   if (!editDialog.value) return;
 
-  dataSourceValues.value = {};
+  const datasourceType = datasourceTypeList.value.find((item) => item.type === type);
+
+  dataSourceValues.value = mergeWith(
+    { type, title: datasourceType?.text },
+    dataSourceService?.getFormValue(type) || {},
+    (objValue, srcValue) => {
+      if (Array.isArray(srcValue)) {
+        return srcValue;
+      }
+    },
+  );
+
+  dialogTitle.value = `新增${datasourceType?.text || ''}`;
 
   editDialog.value.show();
 };
 
 const editHandler = (id: string) => {
-  if (!editDialog.value || !services) return;
+  if (!editDialog.value) return;
 
   dataSourceValues.value = {
     ...dataSourceService?.getDataSourceById(id),
   };
 
+  dialogTitle.value = `新增${dataSourceValues.value.title || ''}`;
+
   editDialog.value.show();
 };
 
-const removeHandler = async (id: string) => {
-  await tMagicMessageBox.confirm('确定删除?', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  });
-
+const removeHandler = (id: string) => {
   dataSourceService?.remove(id);
 };
 
 const submitDataSourceHandler = (value: DataSourceSchema) => {
-  if (!services) return;
-
   if (value.id) {
     dataSourceService?.update(value);
   } else {
@@ -127,24 +115,9 @@ const submitDataSourceHandler = (value: DataSourceSchema) => {
   editDialog.value?.hide();
 };
 
-const tree = ref<InstanceType<typeof TMagicTree>>();
+const dataSourceList = ref<InstanceType<typeof DataSourceList>>();
 
 const filterTextChangeHandler = (val: string) => {
-  tree.value?.filter(val);
-};
-
-// 选中组件
-const selectComp = (compId: Id) => {
-  const stage = editorService?.get('stage');
-  editorService?.select(compId);
-  stage?.select(compId);
-};
-
-const clickHandler = (data: any, node: any) => {
-  if (data.type === 'node') {
-    selectComp(data.id);
-  } else if (data.type === 'key') {
-    selectComp(node.parent.data.id);
-  }
+  dataSourceList.value?.filter(val);
 };
 </script>

package/src/layouts/workspace/Stage.vue

@@ -12,6 +12,7 @@
       width: 60,
       height: 50,
     }"
+    @click="stageWrap?.container?.focus()"
   >
     <div
       class="m-editor-stage-container"
@@ -35,9 +36,9 @@ import type { MContainer } from '@tmagic/schema';
 import StageCore, { calcValueByFontsize, getOffset, Runtime } from '@tmagic/stage';
 
 import ScrollViewer from '@editor/components/ScrollViewer.vue';
+import { useStage } from '@editor/hooks/use-stage';
 import { Layout, MenuButton, MenuComponent, Services, StageOptions } from '@editor/type';
 import { getConfig } from '@editor/utils/config';
-import { useStage } from '@editor/utils/stage';
 
 import ViewerMenu from './ViewerMenu.vue';
 
@@ -164,7 +165,7 @@ const dropHandler = async (e: DragEvent) => {
   if (e.dataTransfer && parent && stageContainer.value && stage) {
     const parseDSL = getConfig('parseDSL');
 
-    const data = e.dataTransfer.getData('text/html');
+    const data = e.dataTransfer.getData('text/json');
 
     if (!data) return;
 

package/src/layouts/workspace/ViewerMenu.vue

@@ -4,14 +4,16 @@
 
 <script lang="ts" setup>
 import { computed, inject, markRaw, ref, watch } from 'vue';
-import { Bottom, CopyDocument, Delete, DocumentCopy, Top } from '@element-plus/icons-vue';
+import { Bottom, Top } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/schema';
 import { isPage } from '@tmagic/utils';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
+import CenterIcon from '@editor/icons/CenterIcon.vue';
 import storageService from '@editor/services/storage';
 import { LayerOffset, Layout, MenuButton, MenuComponent, Services } from '@editor/type';
+import { useCopyMenu, useDeleteMenu, useMoveToMenu, usePasteMenu } from '@editor/utils/content-menu';
 import { COPY_STORAGE_KEY } from '@editor/utils/editor';
 
 defineOptions({
@@ -32,42 +34,20 @@ const canCenter = ref(false);
 const node = computed(() => editorService?.get('node'));
 const nodes = computed(() => editorService?.get('nodes'));
 const parent = computed(() => editorService?.get('parent'));
-const stage = computed(() => editorService?.get('stage'));
 
 const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
   {
     type: 'button',
     text: '水平居中',
+    icon: markRaw(CenterIcon),
     display: () => canCenter.value,
     handler: () => {
       if (!nodes.value) return;
       editorService?.alignCenter(nodes.value);
     },
   },
-  {
-    type: 'button',
-    text: '复制',
-    icon: markRaw(CopyDocument),
-    handler: () => {
-      nodes.value && editorService?.copy(nodes.value);
-      canPaste.value = true;
-    },
-  },
-  {
-    type: 'button',
-    text: '粘贴',
-    icon: markRaw(DocumentCopy),
-    display: () => canPaste.value,
-    handler: () => {
-      const rect = menu.value?.$el.getBoundingClientRect();
-      const parentRect = stage.value?.container?.getBoundingClientRect();
-      const initialLeft = (rect?.left || 0) - (parentRect?.left || 0);
-      const initialTop = (rect?.top || 0) - (parentRect?.top || 0);
-
-      if (!nodes.value || nodes.value.length === 0) return;
-      editorService?.paste({ left: initialLeft, top: initialTop });
-    },
-  },
+  useCopyMenu(),
+  usePasteMenu(menu),
   {
     type: 'divider',
     direction: 'horizontal',
@@ -97,6 +77,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
   {
     type: 'button',
     text: '置顶',
+    icon: markRaw(Top),
     display: () => !isPage(node.value) && !props.isMultiSelect,
     handler: () => {
       editorService?.moveLayer(LayerOffset.TOP);
@@ -105,25 +86,19 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
   {
     type: 'button',
     text: '置底',
+    icon: markRaw(Bottom),
     display: () => !isPage(node.value) && !props.isMultiSelect,
     handler: () => {
       editorService?.moveLayer(LayerOffset.BOTTOM);
     },
   },
+  useMoveToMenu(services),
   {
     type: 'divider',
     direction: 'horizontal',
     display: () => !isPage(node.value) && !props.isMultiSelect,
   },
-  {
-    type: 'button',
-    text: '删除',
-    icon: Delete,
-    display: () => !isPage(node.value),
-    handler: () => {
-      nodes.value && editorService?.remove(nodes.value);
-    },
-  },
+  useDeleteMenu(),
   {
     type: 'divider',
     direction: 'horizontal',

package/src/services/codeBlock.ts

@@ -19,7 +19,8 @@
 import { reactive } from 'vue';
 import { keys, pick } from 'lodash-es';
 
-import { CodeBlockContent, CodeBlockDSL, Id } from '@tmagic/schema';
+import type { ColumnConfig } from '@tmagic/form';
+import type { CodeBlockContent, CodeBlockDSL, Id } from '@tmagic/schema';
 
 import type { CodeState } from '@editor/type';
 import { CODE_DRAFT_STORAGE_KEY } from '@editor/type';
@@ -29,23 +30,15 @@ import BaseService from './BaseService';
 
 class CodeBlock extends BaseService {
   private state = reactive<CodeState>({
-    isShowCodeEditor: false,
     codeDsl: null,
-    id: '',
     editable: true,
     combineIds: [],
     undeletableList: [],
+    paramsColConfig: undefined,
   });
 
   constructor() {
-    super([
-      'setCodeDslById',
-      'setCodeEditorShowStatus',
-      'setEditStatus',
-      'setCombineIds',
-      'setUndeleteableList',
-      'deleteCodeDslByIds',
-    ]);
+    super(['setCodeDslById', 'setEditStatus', 'setCombineIds', 'setUndeleteableList', 'deleteCodeDslByIds']);
   }
 
   /**
@@ -86,7 +79,7 @@ class CodeBlock extends BaseService {
    * @param {CodeBlockContent} codeConfig 代码块内容配置信息
    * @returns {void}
    */
-  public async setCodeDslById(id: Id, codeConfig: CodeBlockContent): Promise<void> {
+  public async setCodeDslById(id: Id, codeConfig: Partial<CodeBlockContent>): Promise<void> {
     const codeDsl = this.getCodeDsl();
 
     if (!codeDsl) {
@@ -97,7 +90,10 @@ class CodeBlock extends BaseService {
     if (codeConfig.content) {
       // 在保存的时候转换代码内容
       const parseDSL = getConfig('parseDSL');
-      codeConfigProcessed.content = parseDSL(codeConfig.content);
+      if (typeof codeConfig.content === 'string') {
+        codeConfig.content = parseDSL<(...args: any[]) => any>(codeConfig.content);
+      }
+      codeConfigProcessed.content = codeConfig.content;
     }
 
     const existContent = codeDsl[id] || {};
@@ -120,43 +116,6 @@ class CodeBlock extends BaseService {
     return pick(codeDsl, ids) as CodeBlockDSL;
   }
 
-  /**
-   * 设置代码编辑面板展示状态
-   * @param {boolean} status 是否展示代码编辑面板
-   * @returns {void}
-   */
-  public async setCodeEditorShowStatus(status: boolean): Promise<void> {
-    this.state.isShowCodeEditor = status;
-  }
-
-  /**
-   * 获取代码编辑面板展示状态
-   * @returns {boolean} 是否展示代码编辑面板
-   */
-  public getCodeEditorShowStatus(): boolean {
-    return this.state.isShowCodeEditor;
-  }
-
-  /**
-   * 设置代码编辑面板展示状态及展示内容
-   * @param {boolean} status 是否展示代码编辑面板
-   * @param {Id} id 代码块id
-   * @returns {void}
-   */
-  public setCodeEditorContent(status: boolean, id: Id): void {
-    if (!id) return;
-    this.setId(id);
-    this.state.isShowCodeEditor = status;
-  }
-
-  /**
-   * 获取当前选中的代码块内容
-   * @returns {CodeBlockContent | null}
-   */
-  public getCurrentDsl(): CodeBlockContent | null {
-    return this.getCodeContentById(this.state.id);
-  }
-
   /**
    * 获取编辑状态
    * @returns {boolean} 是否可编辑
@@ -174,24 +133,6 @@ class CodeBlock extends BaseService {
     this.state.editable = status;
   }
 
-  /**
-   * 设置当前选中的代码块ID
-   * @param {Id} id 代码块id
-   * @returns {void}
-   */
-  public setId(id: Id): void {
-    if (!id) return;
-    this.state.id = id;
-  }
-
-  /**
-   * 获取当前选中的代码块ID
-   * @returns {Id} id 代码块id
-   */
-  public getId(): Id {
-    return this.state.id;
-  }
-
   /**
    * 设置当前选中组件已关联绑定的代码块id数组
    * @param {string[]} ids 代码块id数组
@@ -263,11 +204,19 @@ class CodeBlock extends BaseService {
     });
   }
 
+  public setParamsColConfig(config: ColumnConfig): void {
+    this.state.paramsColConfig = config;
+  }
+
+  public getParamsColConfig(): ColumnConfig | undefined {
+    return this.state.paramsColConfig;
+  }
+
   /**
    * 生成代码块唯一id
    * @returns {Id} 代码块唯一id
    */
-  public async getUniqueId(): Promise<Id> {
+  public async getUniqueId(): Promise<string> {
     const newId = `code_${Math.random().toString(10).substring(2).substring(0, 4)}`;
     // 判断是否重复
     const dsl = await this.getCodeDsl();
@@ -277,9 +226,7 @@ class CodeBlock extends BaseService {
   }
 
   public resetState() {
-    this.state.isShowCodeEditor = false;
     this.state.codeDsl = null;
-    this.state.id = '';
     this.state.editable = true;
     this.state.combineIds = [];
     this.state.undeletableList = [];

package/src/services/dataSource.ts

@@ -2,23 +2,30 @@ import { reactive } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import type { FormConfig } from '@tmagic/form';
-import { DataSourceSchema } from '@tmagic/schema';
+import type { DataSourceSchema } from '@tmagic/schema';
 import { guid } from '@tmagic/utils';
 
+import type { DatasourceTypeOption } from '@editor/type';
 import { getFormConfig } from '@editor/utils/data-source';
 
 import BaseService from './BaseService';
 
 interface State {
+  datasourceTypeList: DatasourceTypeOption[];
   dataSources: DataSourceSchema[];
+  editable: boolean;
   configs: Record<string, FormConfig>;
+  values: Record<string, Partial<DataSourceSchema>>;
 }
 
 type StateKey = keyof State;
 class DataSource extends BaseService {
   private state = reactive<State>({
+    datasourceTypeList: [],
     dataSources: [],
+    editable: true,
     configs: {},
+    values: {},
   });
 
   public set<K extends StateKey, T extends State[K]>(name: K, value: T) {
@@ -37,6 +44,14 @@ class DataSource extends BaseService {
     this.get('configs')[type] = config;
   }
 
+  public getFormValue(type = 'base') {
+    return this.get('values')[type];
+  }
+
+  public setFormValue(type: string, value: Partial<DataSourceSchema>) {
+    this.get('values')[type] = value;
+  }
+
   public add(config: DataSourceSchema) {
     const newConfig = {
       ...config,

package/src/services/dep.ts

@@ -19,27 +19,24 @@ import { EventEmitter } from 'events';
 
 import { reactive } from 'vue';
 
-import { MNode } from '@tmagic/schema';
+import type { Dep, Id, MNode } from '@tmagic/schema';
+import { isObject } from '@tmagic/utils';
+
+import { DepTargetType } from '@editor/type';
 
 type IsTarget = (key: string | number, value: any) => boolean;
 
 interface TargetOptions {
   isTarget: IsTarget;
   id: string | number;
-  type?: string;
-  name: string;
-}
-
-interface Dep {
-  [key: string | number]: {
-    name: string;
-    keys: (string | number)[];
-  };
+  /** 类型，数据源、代码块或其他 */
+  type?: DepTargetType | string;
+  name?: string;
 }
 
 interface TargetList {
-  [key: string]: {
-    [key: string | number]: Target;
+  [type: DepTargetType | string]: {
+    [targetId: string | number]: Target;
   };
 }
 
@@ -60,11 +57,11 @@ export class Target extends EventEmitter {
   /**
    * 目标名称，用于显示在依赖列表中
    */
-  public name: string;
+  public name?: string;
   /**
    * 不同的目标可以进行分类，例如代码块，数据源可以为两个不同的type
    */
-  public type = 'default';
+  public type: DepTargetType | string = DepTargetType.DEFAULT;
   /**
    * 依赖详情
    * 实例：{ 'node_id': { name: 'node_name', keys: [ created, mounted ] } }
@@ -156,14 +153,14 @@ export class Target extends EventEmitter {
 }
 
 export class Watcher extends EventEmitter {
-  public targets = reactive<TargetList>({});
+  private targets = reactive<TargetList>({});
 
   /**
    * 获取指定类型中的所有target
    * @param type 分类
    * @returns Target[]
    */
-  public getTargets(type = 'default') {
+  public getTargets(type: DepTargetType | string = DepTargetType.DEFAULT) {
     return this.targets[type] || {};
   }
 
@@ -230,7 +227,7 @@ export class Watcher extends EventEmitter {
    * @param type 分类
    * @returns void
    */
-  public removeTargets(type = 'default') {
+  public removeTargets(type: DepTargetType | string = DepTargetType.DEFAULT) {
     const targets = this.targets[type];
 
     if (!targets) return;
@@ -277,13 +274,15 @@ export class Watcher extends EventEmitter {
    * @param nodes 需要清除依赖的节点
    */
   public clear(nodes?: MNode[]) {
+    const clearedItemsNodeIds: Id[] = [];
     Object.values(this.targets).forEach((targets) => {
       Object.values(targets).forEach((target) => {
         if (nodes) {
           nodes.forEach((node) => {
             target.removeDep(node);
 
-            if (Array.isArray(node.items)) {
+            if (Array.isArray(node.items) && node.items.length && !clearedItemsNodeIds.includes(node.id)) {
+              clearedItemsNodeIds.push(node.id);
               this.clear(node.items);
             }
           });
@@ -305,9 +304,11 @@ export class Watcher extends EventEmitter {
           this.emit('update-dep', node, fullKey);
         } else if (!keyIsItems && Array.isArray(value)) {
           value.forEach((item, index) => {
-            collectTarget(item, `${fullKey}.${index}`);
+            if (isObject(item)) {
+              collectTarget(item, `${fullKey}.${index}`);
+            }
           });
-        } else if (Object.prototype.toString.call(value) === '[object Object]') {
+        } else if (isObject(value)) {
           collectTarget(value, fullKey);
         }
 
@@ -319,6 +320,7 @@ export class Watcher extends EventEmitter {
       };
 
       Object.entries(config).forEach(([key, value]) => {
+        if (typeof value === 'undefined' || value === '') return;
         doCollect(key, value);
       });
     };