@tmagic/editor 1.3.0-alpha.2 → 1.3.0-alpha.21

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/services/storage.ts

@@ -1,5 +1,7 @@
 import serialize from 'serialize-javascript';
 
+import { getConfig } from '@editor/utils/config';
+
 import BaseService from './BaseService';
 
 interface Options {
@@ -64,8 +66,7 @@ export class WebStorage extends BaseService {
 
     switch (protocol) {
       case Protocol.OBJECT:
-        // eslint-disable-next-line no-eval
-        return eval(`(${item})`);
+        return getConfig('parseDSL')(`(${item})`);
       case Protocol.JSON:
         return JSON.parse(item);
       case Protocol.NUMBER:

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

@@ -8,7 +8,7 @@
   font-weight: 600;
   padding: 4px 0px;
   overflow: auto;
-  max-height: 100%;
+  max-height: 80%;
 
   .menu-item {
     color: #333;

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

@@ -0,0 +1,18 @@
+.tmagic-data-source-input-text {
+  .el-input__wrapper.tmagic-data-source-input-text-wrapper {
+    overflow: hidden;
+    padding-right: 30px;
+  }
+
+  .el-input__inner {
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .tmagic-data-source-input-icon {
+    position: absolute;
+    right: 7px;
+  }
+}

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/event.scss

@@ -19,18 +19,21 @@
     box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.12);
   }
 }
-.m-fields-code-select-col {
+.m-fields-code-select-col,
+.m-fields-data-source-method-select {
   width: 100%;
-  .code-select-container {
-    display: flex;
-    align-items: center;
-    .select {
-      flex: 10 0 100px;
-    }
-    .icon {
-      flex: 1 0 20px;
-      cursor: pointer;
-      margin-right: 5px;
-    }
+}
+
+.code-select-container,
+.data-source-method-select-container {
+  display: flex;
+  align-items: center;
+  .select {
+    flex: 10 0 100px;
+  }
+  .icon {
+    flex: 1 0 20px;
+    cursor: pointer;
+    margin-right: 5px;
   }
 }

package/src/theme/framework.scss

@@ -4,10 +4,7 @@
   width: 100%;
 
   &-content {
-    width: 100%;
     height: calc(100% - #{$--nav-height});
-    display: flex;
-    justify-self: space-between;
   }
 
   &-framework-center {

package/src/theme/layer-panel.scss

@@ -44,6 +44,12 @@
 .magic-editor-layer-panel .cus-tree-node {
   width: 100%;
   overflow: hidden;
+  display: flex;
+  justify-content: space-between;
+
+  .layer-node-tool {
+    margin-right: 15px;
+  }
 }
 
 .magic-editor-layer-panel .cus-tree-node-hover {

package/src/theme/layout.scss

@@ -2,4 +2,8 @@
   width: 100%;
   display: flex;
   justify-self: space-between;
+
+  &:has(.m-editor-resizer-draging) {
+    overflow: hidden;
+  }
 }

package/src/theme/resizer.scss

@@ -4,14 +4,38 @@
   width: 8px;
   margin: 0 -5px;
   height: 100%;
-  opacity: 0.9;
+  opacity: 0.8;
   background: padding-box #d8dee8;
   box-sizing: border-box;
   cursor: col-resize;
   z-index: 1;
+  position: relative;
 
   &:hover {
     border-color: #d8dee8;
+
+    .icon-container {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+
+  &.m-editor-resizer-draging {
+    &::after {
+      content: "";
+      position: absolute;
+      width: 600px;
+      height: 100%;
+      left: 0;
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      width: 600px;
+      height: 100%;
+      right: 0;
+    }
   }
 
   .icon-container {
@@ -40,12 +64,3 @@
     font-size: 18px;
   }
 }
-
-.magic-editor-resizer:hover {
-  .icon-container {
-    visibility: visible;
-    opacity: 1;
-  }
-  // border-left: 5px solid rgba(0,0,0,.5);
-  // border-right: 5px solid rgba(0,0,0,.5);
-}

package/src/theme/stage.scss

@@ -6,6 +6,10 @@
   display: flex;
   justify-content: center;
   align-items: center;
+
+  &:focus-visible {
+    outline: none;
+  }
 }
 
 .m-editor-stage-container {

package/src/theme/theme.scss

@@ -19,4 +19,6 @@
 @import "./dep-list.scss";
 @import "./data-source.scss";
 @import "./data-source-fields.scss";
+@import "./data-source-methods.scss";
+@import "./data-source-input.scss";
 @import "./key-value.scss";

package/src/type.ts

@@ -18,7 +18,7 @@
 
 import type { Component } from 'vue';
 
-import type { FormConfig, FormItem } from '@tmagic/form';
+import type { ColumnConfig, FilterFunction, FormConfig, FormItem } from '@tmagic/form';
 import type { CodeBlockContent, CodeBlockDSL, Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import type {
@@ -30,11 +30,12 @@ import type {
 
 import type { CodeBlockService } from './services/codeBlock';
 import type { ComponentListService } from './services/componentList';
-import { DataSourceService } from './services/dataSource';
+import type { DataSourceService } from './services/dataSource';
 import type { DepService } from './services/dep';
 import type { EditorService } from './services/editor';
 import type { EventsService } from './services/events';
 import type { HistoryService } from './services/history';
+import type { KeybindingService } from './services/keybinding';
 import type { PropsService } from './services/props';
 import type { StorageService } from './services/storage';
 import type { UiService } from './services/ui';
@@ -44,6 +45,7 @@ export type BeforeAdd = (config: MNode, parent: MContainer) => Promise<MNode> |
 export type GetConfig = (config: FormConfig) => Promise<FormConfig> | FormConfig;
 
 export interface InstallOptions {
+  parseDSL: <T = any>(dsl: string) => T;
   [key: string]: any;
 }
 
@@ -58,6 +60,7 @@ export interface Services {
   codeBlockService: CodeBlockService;
   depService: DepService;
   dataSourceService: DataSourceService;
+  keybindingService: KeybindingService;
 }
 
 export interface StageOptions {
@@ -90,7 +93,7 @@ export type StoreStateKey = keyof StoreState;
 
 export interface PropsState {
   propsConfigMap: Record<string, FormConfig>;
-  propsValueMap: Record<string, MNode>;
+  propsValueMap: Record<string, Partial<MNode>>;
 }
 
 export interface ComponentGroupState {
@@ -331,18 +334,15 @@ export interface ScrollViewerEvent {
 }
 
 export type CodeState = {
-  /** 是否展示代码块编辑区 */
-  isShowCodeEditor: boolean;
   /** 代码块DSL数据源 */
   codeDsl: CodeBlockDSL | null;
-  /** 当前选中的代码块id */
-  id: Id;
   /** 代码块是否可编辑 */
   editable: boolean;
   /** list模式下左侧展示的代码列表 */
   combineIds: string[];
   /** 为业务逻辑预留的不可删除的代码块列表，由业务逻辑维护（如代码块上线后不可删除） */
   undeletableList: Id[];
+  paramsColConfig?: ColumnConfig;
 };
 
 export type HookData = {
@@ -426,4 +426,102 @@ export interface EventSelectConfig {
   compActionConfig?: FormItem;
   /** 联动代码配置 */
   codeActionConfig?: FormItem;
+  /** 联动数据源配置 */
+  dataSourceActionConfig?: FormItem;
+}
+
+export enum KeyBindingCommand {
+  /** 复制 */
+  COPY_NODE = 'tmagic-system-copy-node',
+  /** 粘贴 */
+  PASTE_NODE = 'tmagic-system-paste-node',
+  /** 删除 */
+  DELETE_NODE = 'tmagic-system-delete-node',
+  /** 剪切 */
+  CUT_NODE = 'tmagic-system-cut-node',
+  /** 撤销 */
+  UNDO = 'tmagic-system-undo',
+  /** 重做 */
+  REDO = 'tmagic-system-redo',
+  /** 放大 */
+  ZOOM_IN = 'tmagic-system-zoom-in',
+  /** 缩小 */
+  ZOOM_OUT = 'tmagic-system-zoom-out',
+  /** 缩放到实际大小 */
+  ZOOM_RESET = 'tmagic-system-zoom-reset',
+  /** 缩放以适应 */
+  ZOOM_FIT = 'tmagic-system-zoom-fit',
+  /** 向上移动1px */
+  MOVE_UP_1 = 'tmagic-system-move-up-1',
+  /** 向下移动1px */
+  MOVE_DOWN_1 = 'tmagic-system-move-down-1',
+  /** 向左移动1px */
+  MOVE_LEFT_1 = 'tmagic-system-move-left-1',
+  /** 向右移动1px */
+  MOVE_RIGHT_1 = 'tmagic-system-move-right-1',
+  /** 向上移动10px */
+  MOVE_UP_10 = 'tmagic-system-move-up-10',
+  /** 向下移动10px */
+  MOVE_DOWN_10 = 'tmagic-system-move-down-10',
+  /** 向左移动10px */
+  MOVE_LEFT_10 = 'tmagic-system-move-left-10',
+  /** 向右移动10px */
+  MOVE_RIGHT_10 = 'tmagic-system-move-right-10',
+  /** 切换组件 */
+  SWITCH_NODE = 'tmagic-system-switch-node',
+}
+
+export interface KeyBindingItem {
+  command: KeyBindingCommand | string;
+  keybinding?: string | string[];
+  when: [string, 'keyup' | 'keydown'][];
+}
+
+export interface KeyBindingCacheItem {
+  type: string;
+  command: KeyBindingCommand | string;
+  keybinding?: string | string[];
+  eventType: 'keyup' | 'keydown';
+  binded: boolean;
+}
+
+export interface CodeSelectColConfig {
+  type: 'code-select-col';
+  name: string;
+  labelWidth?: number | string;
+  disabled?: boolean | FilterFunction;
+  display?: boolean | FilterFunction;
+}
+
+export interface DataSourceMethodSelectConfig {
+  type: 'data-source-method-select';
+  name: string;
+  labelWidth?: number | string;
+  disabled?: boolean | FilterFunction;
+  display?: boolean | FilterFunction;
+}
+
+export interface DataSourceFieldSelectConfig {
+  type: 'data-source-field-select';
+  name: string;
+  labelWidth?: number | string;
+  disabled?: boolean | FilterFunction;
+  display?: boolean | FilterFunction;
+}
+
+export enum DepTargetType {
+  DEFAULT = 'default',
+  /** 代码块 */
+  CODE_BLOCK = 'code-block',
+  /** 数据源 */
+  DATA_SOURCE = 'data-source',
+  /** 数据源方法 */
+  DATA_SOURCE_METHOD = 'data-source-method',
+  /** 数据源条件 */
+  DATA_SOURCE_COND = 'data-source-cond',
+}
+
+export interface DatasourceTypeOption {
+  type: string;
+  text: string;
 }

package/src/utils/config.ts

@@ -24,6 +24,6 @@ const setConfig = (option: InstallOptions): void => {
   $TMAGIC_EDITOR = option;
 };
 
-const getConfig = (key: keyof InstallOptions): unknown => $TMAGIC_EDITOR[key];
+const getConfig = <K extends keyof InstallOptions>(key: K): InstallOptions[K] => $TMAGIC_EDITOR[key];
 
 export { getConfig, setConfig };

package/src/utils/content-menu.ts

@@ -0,0 +1,92 @@
+import { computed, markRaw, Ref, ref } from 'vue';
+import { CopyDocument, Delete, DocumentCopy } from '@element-plus/icons-vue';
+
+import { Id, MContainer, NodeType } from '@tmagic/schema';
+import { isPage } from '@tmagic/utils';
+
+import ContentMenu from '@editor/components/ContentMenu.vue';
+import type { MenuButton, Services } from '@editor/type';
+
+export const useDeleteMenu = (): MenuButton => ({
+  type: 'button',
+  text: '删除',
+  icon: Delete,
+  display: (services) => {
+    const node = services?.editorService?.get('node');
+    return node?.type !== NodeType.ROOT && !isPage(node);
+  },
+  handler: (services) => {
+    const nodes = services?.editorService?.get('nodes');
+    nodes && services?.editorService?.remove(nodes);
+  },
+});
+
+const canPaste = ref(false);
+
+export const useCopyMenu = (): MenuButton => ({
+  type: 'button',
+  text: '复制',
+  icon: markRaw(CopyDocument),
+  handler: (services) => {
+    const nodes = services?.editorService?.get('nodes');
+    nodes && services?.editorService?.copy(nodes);
+    canPaste.value = true;
+  },
+});
+
+export const usePasteMenu = (menu?: Ref<InstanceType<typeof ContentMenu> | undefined>): MenuButton => ({
+  type: 'button',
+  text: '粘贴',
+  icon: markRaw(DocumentCopy),
+  display: () => canPaste.value,
+  handler: (services) => {
+    const nodes = services?.editorService?.get('nodes');
+    if (!nodes || nodes.length === 0) return;
+
+    if (menu?.value?.$el) {
+      const stage = services?.editorService?.get('stage');
+      const rect = menu.value.$el.getBoundingClientRect();
+      const parentRect = stage?.container?.getBoundingClientRect();
+      const initialLeft = (rect.left || 0) - (parentRect?.left || 0);
+      const initialTop = (rect.top || 0) - (parentRect?.top || 0);
+      services?.editorService?.paste({ left: initialLeft, top: initialTop });
+    } else {
+      services?.editorService?.paste();
+    }
+  },
+});
+
+const moveTo = (id: Id, services?: Services) => {
+  if (!services?.editorService) return;
+
+  const nodes = services.editorService.get('nodes') || [];
+  const parent = services.editorService.getNodeById(id) as MContainer;
+
+  if (!parent) return;
+
+  services?.editorService.add(nodes, parent);
+  services?.editorService.remove(nodes);
+};
+
+export const useMoveToMenu = (services?: Services): MenuButton => {
+  const root = computed(() => services?.editorService?.get('root'));
+
+  return {
+    type: 'button',
+    text: '移动至',
+    display: (services) => {
+      const node = services?.editorService?.get('node');
+      const pageLength = services?.editorService?.get('pageLength') || 0;
+      return !isPage(node) && pageLength > 1;
+    },
+    items: (root.value?.items || [])
+      .filter((page) => page.id !== services?.editorService?.get('page')?.id)
+      .map((page) => ({
+        text: `${page.name}(${page.id})`,
+        type: 'button',
+        handler: (services?: Services) => {
+          moveTo(page.id, services);
+        },
+      })),
+  };
+};