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

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);
       });
     };

package/src/services/editor.ts

@@ -193,7 +193,7 @@ class Editor extends BaseService {
   /**
    * 只有容器拥有布局
    */
-  public async getLayout(parent: MNode, node?: MNode): Promise<Layout> {
+  public async getLayout(parent: MNode, node?: MNode | null): Promise<Layout> {
     if (node && typeof node !== 'function' && isFixed(node)) return Layout.FIXED;
 
     if (parent.layout) {
@@ -648,12 +648,14 @@ class Editor extends BaseService {
 
     if (doc) {
       const el = doc.getElementById(`${node.id}`);
-      const parentEl = el?.offsetParent;
+      const parentEl = layout === Layout.FIXED ? doc.body : el?.offsetParent;
       if (parentEl && el) {
         node.style.left = (parentEl.clientWidth - el.clientWidth) / 2;
+        node.style.right = '';
       }
     } else if (parent.style && isNumber(parent.style?.width) && isNumber(node.style?.width)) {
       node.style.left = (parent.style.width - node.style.width) / 2;
+      node.style.right = '';
     }
 
     return node;
@@ -705,9 +707,9 @@ class Editor extends BaseService {
     brothers.splice(index, 1);
 
     if (offset === LayerOffset.TOP) {
-      brothers.splice(isRelative ? 0 : brothers.length - 1, 0, node);
+      brothers.splice(isRelative ? 0 : brothers.length, 0, node);
     } else if (offset === LayerOffset.BOTTOM) {
-      brothers.splice(isRelative ? brothers.length - 1 : 0, 0, node);
+      brothers.splice(isRelative ? brothers.length : 0, 0, node);
     } else {
       brothers.splice(index + (isRelative ? -offset : offset), 0, node);
     }
@@ -792,20 +794,46 @@ class Editor extends BaseService {
     if (!node || isPage(node)) return;
 
     const { style, id, type } = node;
-    if (!style || style.position !== 'absolute') return;
-
-    if (top && !isNumber(style.top)) return;
-    if (left && !isNumber(style.left)) return;
-
-    this.update({
-      id,
-      type,
-      style: {
-        ...style,
-        left: Number(style.left) + left,
-        top: Number(style.top) + top,
-      },
-    });
+    if (!style || !['absolute', 'fixed'].includes(style.position)) return;
+
+    const update = (style: { [key: string]: any }) =>
+      this.update({
+        id,
+        type,
+        style,
+      });
+
+    if (top) {
+      if (isNumber(style.top)) {
+        update({
+          ...style,
+          top: Number(style.top) + Number(top),
+          bottom: '',
+        });
+      } else if (isNumber(style.bottom)) {
+        update({
+          ...style,
+          bottom: Number(style.bottom) - Number(top),
+          top: '',
+        });
+      }
+    }
+
+    if (left) {
+      if (isNumber(style.left)) {
+        update({
+          ...style,
+          left: Number(style.left) + Number(left),
+          right: '',
+        });
+      } else if (isNumber(style.right)) {
+        update({
+          ...style,
+          right: Number(style.right) - Number(left),
+          left: '',
+        });
+      }
+    }
   }
 
   public resetState() {

package/src/services/props.ts

@@ -80,7 +80,7 @@ class Props extends BaseService {
     return cloneDeep(this.state.propsConfigMap[type] || (await this.fillConfig([])));
   }
 
-  public setPropsValues(values: Record<string, MNode>) {
+  public setPropsValues(values: Record<string, Partial<MNode>>) {
     Object.keys(values).forEach((type: string) => {
       this.setPropsValue(toLine(type), values[type]);
     });
@@ -91,7 +91,7 @@ class Props extends BaseService {
    * @param type 组件类型
    * @param value 组件初始值
    */
-  public async setPropsValue(type: string, value: MNode) {
+  public async setPropsValue(type: string, value: Partial<MNode>) {
     this.state.propsValueMap[type] = value;
   }
 

package/src/theme/code-block.scss

@@ -25,124 +25,12 @@
   }
 }
 
-.el-dialog.is-fullscreen.code-editor-dialog {
-  overflow: hidden;
-}
-
-.code-editor-dialog {
-  .tmagic-design-card {
-    .t-card__header {
-      display: block;
-    }
-  }
-
-  .el-dialog__body,
-  .t-dialog__body {
-    height: 90%;
-    padding-top: 10px;
-  }
-  .tmagic-design-card {
-    height: 100%;
-    background: #fff;
-    .el-card__body,
-    .t-card__body {
-      height: 100%;
-      background: #fff;
-    }
-  }
-
-  .code-editor-layout {
-    height: 100%;
-    border: 1px solid #e4e7ed;
-
-    .side-tree {
-      height: 100%;
-      overflow: auto;
-      .el-tree-node__label {
-        width: 100%;
-      }
-
-      .list-container {
-        width: 100%;
-        overflow: hidden;
-        margin-left: -10px;
-        .list-item {
-          width: 100%;
-          margin: 10px 0;
-          line-height: 30px;
-          .code-name {
-            width: 100%;
-            font-size: 14px;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-          }
-        }
-      }
-    }
+.m-editor-code-block-editor {
+  .tmagic-design-table {
+    height: 180px;
   }
 
-  .code-name-wrapper {
-    display: flex;
-    align-items: center;
-    font-size: 16px;
-    margin-bottom: 10px;
-    .code-name-label {
-      margin-right: 10px;
-    }
-    .code-name-input {
-      width: 300px;
-    }
-  }
-
-  .m-editor-code-block-editor-panel-list-mode {
-    height: 100%;
-    z-index: 10;
-    background: #fff;
-    .el-card {
-      border: 0;
-    }
-  }
-
-  .m-editor-code-block-editor-panel {
-    position: absolute;
-    top: 0;
-    left: 4px;
-    width: calc(100% - 9px);
-    height: 100%;
-    z-index: 10;
-    background: #fff;
-    .el-card {
-      border: 0;
-    }
-  }
-
-  .m-editor-wrapper {
-    height: 100%;
-    &.fullScreen {
-      height: 100%;
-      width: 100%;
-      position: fixed;
-      top: 0;
-      left: 0;
-      z-index: 100;
-    }
-    .m-editor-container {
-      height: calc(100% - 45px);
-    }
-    .m-editor-content-bottom {
-      height: 45px;
-      width: 100%;
-      display: flex;
-      justify-content: end;
-      background: #fff;
-      position: absolute;
-      right: 20px;
-      bottom: 0;
-      > button {
-        height: 30px;
-        margin-top: 5px;
-      }
-    }
+  .el-drawer__body {
+    padding: 10px 20px;
   }
 }

package/src/theme/code-editor.scss

@@ -1,7 +1,32 @@
 .magic-code-editor {
   width: 100%;
+}
+
+.magic-code-editor-wrapper {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  &.full-screen {
+    position: fixed;
+    z-index: 10000;
+    top: 0;
+    left: 0;
+  }
+
+  .magic-code-editor-content {
+    width: 100%;
+    height: 100%;
+
+    .margin {
+      margin: 0;
+    }
+  }
 
-  .margin {
-    margin: 0;
+  .magic-code-editor-full-screen-icon {
+    position: absolute;
+    top: 5px;
+    right: 0;
+    z-index: 11;
   }
 }

package/src/theme/content-menu.scss

@@ -3,12 +3,13 @@
   font-size: 12px;
   background: #fff;
   box-shadow: 0 2px 8px 2px rgba(68, 73, 77, 0.16);
-  z-index: 9999;
+  z-index: 1000;
   transform-origin: 0% 0%;
   font-weight: 600;
   padding: 4px 0px;
   overflow: auto;
-  max-height: 100%;
+  max-height: 80%;
+  min-width: 180px;
 
   .menu-item {
     color: #333;
@@ -43,8 +44,31 @@
       }
     }
 
+    &.active {
+      background-color: $--theme-color;
+      .tmagic-design-button,
+      .tmagic-design-button:active,
+      .tmagic-design-button:focus {
+        color: #fff;
+        background-color: $--theme-color;
+      }
+
+      &.menu-item i {
+        color: #fff;
+      }
+    }
+
     &:hover {
       background-color: $--hover-color;
+      .tmagic-design-button,
+      .tmagic-design-button:active,
+      .tmagic-design-button:focus {
+        color: $--font-color;
+      }
+
+      &.menu-item i {
+        color: $--font-color;
+      }
     }
   }
 }

package/src/theme/data-source-methods.scss

@@ -0,0 +1,13 @@
+.m-editor-data-source-methods {
+  width: 100%;
+
+  .tmagic-design-table {
+    width: 100%;
+  }
+
+  .m-editor-data-source-methods-footer {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 15px;
+  }
+}

package/src/theme/data-source.scss

@@ -15,3 +15,14 @@
     }
   }
 }
+
+.data-source-list-panel-add-menu {
+  .tmagic-design-button {
+    width: 100%;
+    text-align: left;
+
+    span {
+      width: 100%;
+    }
+  }
+}