@tmagic/editor 1.1.6 → 1.2.0-beta.10

package/src/services/editor.ts

@@ -19,11 +19,12 @@
 import { reactive, toRaw } from 'vue';
 import { cloneDeep, mergeWith, uniq } from 'lodash-es';
 
-import type { Id, MApp, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';
+import type { CodeBlockDSL, Id, MApp, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
 import StageCore from '@tmagic/stage';
 import { getNodePath, isNumber, isPage, isPop } from '@tmagic/utils';
 
+import codeBlockService from '../services/codeBlock';
 import historyService, { StepValue } from '../services/history';
 import storageService, { Protocol } from '../services/storage';
 import type { AddMNode, EditorNodeInfo, PastePosition, StoreState } from '../type';
@@ -72,7 +73,7 @@ class Editor extends BaseService {
         'copy',
         'paste',
         'doPaste',
-        'duAlignCenter',
+        'doAlignCenter',
         'alignCenter',
         'moveLayer',
         'moveToContainer',
@@ -80,6 +81,8 @@ class Editor extends BaseService {
         'undo',
         'redo',
         'highlight',
+        'getCodeDsl',
+        'setCodeDsl',
       ],
       // 需要注意循环依赖问题，如果函数间有相互调用的话，不能设置为串行调用
       ['select', 'update', 'moveLayer'],
@@ -419,6 +422,9 @@ class Editor extends BaseService {
     }
 
     this.addModifiedNodeId(parent.id);
+
+    // 通知codeBlockService解除绑定关系
+    codeBlockService.deleteCompsInRelation(node);
   }
 
   /**
@@ -478,10 +484,10 @@ class Editor extends BaseService {
     parentNodeItems[index] = newConfig;
 
     // 将update后的配置更新到nodes中
-    const nodes = this.get('nodes');
+    const nodes = this.get<MNode[]>('nodes') || [];
     const targetIndex = nodes.findIndex((nodeItem: MNode) => `${nodeItem.id}` === `${newConfig.id}`);
     nodes.splice(targetIndex, 1, newConfig);
-    this.set('nodes', nodes);
+    this.set('nodes', [...nodes]);
 
     this.get<StageCore | null>('stage')?.update({
       config: cloneDeep(newConfig),
@@ -617,7 +623,11 @@ class Editor extends BaseService {
 
     const newNode = await this.update(newNodes);
 
-    await stage?.multiSelect(newNodes.map((node) => node.id));
+    if (newNodes.length > 1) {
+      await stage?.multiSelect(newNodes.map((node) => node.id));
+    } else {
+      await stage?.select(newNodes[0].id);
+    }
 
     return newNode;
   }
@@ -760,6 +770,26 @@ class Editor extends BaseService {
     this.get<Map<Id, Id>>('modifiedNodeIds').clear();
   }
 
+  /**
+   * 从dsl中的codeBlocks字段读取活动的代码块
+   * @returns {CodeBlockDSL | null}
+   */
+  public async getCodeDsl(): Promise<CodeBlockDSL | null> {
+    const root = this.get<MApp | null>('root');
+    if (!root) return null;
+    return root.codeBlocks || null;
+  }
+
+  /**
+   * 设置代码块到dsl的codeBlocks字段
+   * @param {CodeBlockDSL} codeDsl 代码DSL
+   * @returns {void}
+   */
+  public async setCodeDsl(codeDsl: CodeBlockDSL): Promise<void> {
+    if (!this.state.root) return;
+    this.state.root.codeBlocks = codeDsl;
+  }
+
   private addModifiedNodeId(id: Id) {
     if (!this.isHistoryStateChange) {
       this.get<Map<Id, Id>>('modifiedNodeIds').set(id, id);

package/src/theme/breadcrumb.scss

@@ -0,0 +1,6 @@
+.m-editor-breadcrumb {
+  position: absolute;
+  left: 5px;
+  top: 5px;
+  z-index: 10;
+}

package/src/theme/code-block.scss

@@ -0,0 +1,184 @@
+.m-editor-code-block-list {
+  margin-top: 5px;
+  .el-tree-node__content {
+    height: auto;
+  }
+  .code-header-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .code-filter-input {
+      margin: 0 5px;
+    }
+    .code-filter-input-no-btn {
+      margin-left: 5px;
+      margin-right: 10px;
+    }
+    .create-code-button {
+      margin-left: 2px;
+      margin-right: 10px;
+    }
+  }
+
+  .divider {
+    margin: 10px 0 0 0;
+  }
+
+  .list-container {
+    width: 100%;
+    overflow: hidden;
+    margin-left: -25px;
+    .list-item {
+      display: flex;
+      align-items: center;
+      .right-tool {
+        position: absolute;
+        right: 15px;
+        padding-left: 5px;
+        display: flex;
+        align-items: center;
+        .edit-icon {
+          margin: 0 5px;
+        }
+      }
+      .code-name {
+        font-size: 14px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        padding: 10px 15px;
+        margin-right: 60px;
+      }
+    }
+    .code-comp-map-wrapper {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      margin-left: 20px;
+      margin-bottom: 5px;
+      .arrow-left {
+        transform: rotate(-45deg);
+        width: 20px;
+        height: 20px;
+      }
+      .code-comp {
+        margin-left: 5px;
+        padding: 5px;
+        .comp-delete-icon {
+          margin-left: 3px;
+        }
+      }
+    }
+  }
+}
+
+.m-fields-code-select {
+  width: 100%;
+  .el-card__body {
+    padding: 5px;
+  }
+  .tool-bar {
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    height: 20px;
+    .tool-item {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+.code-editor-dialog {
+  .el-dialog__body {
+    height: 90%;
+    padding-top: 10px;
+  }
+  .el-card {
+    height: 100%;
+    background: #fff;
+    .el-card__body {
+      height: calc(100% - 80px);
+      background: #fff;
+    }
+  }
+
+  .code-editor-layout {
+    height: 100%;
+    border: 1px solid #e4e7ed;
+
+    .side-tree {
+      height: 100%;
+      overflow: auto;
+
+      .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;
+          }
+        }
+      }
+    }
+  }
+
+  .code-name-wrapper {
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    .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%;
+    .m-editor-container {
+      height: calc(100% - 70px);
+    }
+    .m-editor-content-bottom {
+      height: 40px;
+      width: 100%;
+      display: flex;
+      justify-content: end;
+      background: #fff;
+      > button {
+        height: 30px;
+        margin-top: 15px;
+      }
+    }
+  }
+}

package/src/theme/component-list-panel.scss

@@ -1,11 +1,11 @@
 .ui-component-panel {
   height: 100%;
   border-top: 0 !important;
-  margin-top: 50px;
+  margin-top: 48px;
   background-color: $--sidebar-content-background-color;
 
   .search-input {
-    background: #f8fbff;
+    background: #fff;
     color: #bbbbbb;
     padding: 10px;
     position: absolute;
@@ -15,11 +15,7 @@
     z-index: 1;
 
     .el-input__prefix {
-      padding: 10px;
-    }
-
-    .el-input__suffix {
-      padding: 10px 5px;
+      padding: 7px;
     }
   }
 

package/src/theme/index.scss

@@ -1,14 +1,2 @@
 @import "./common/var.scss";
-@import "./nav-menu.scss";
-@import "./framework.scss";
-@import "./sidebar.scss";
-@import "./layer-panel.scss";
-@import "./component-list-panel.scss";
-@import "./resizer.scss";
-@import "./workspace.scss";
-@import "./page-bar.scss";
-@import "./props-panel.scss";
-@import "./content-menu.scss";
-@import "./stage.scss";
-@import "./code-editor.scss";
-@import "./icon.scss";
+@import "./theme.scss";

package/src/theme/layer-panel.scss

@@ -10,10 +10,15 @@
     left: 0;
     z-index: 1;
 
-    .el-input__suffix {
-      padding: 10px 5px;
+    .el-input__prefix {
+      padding: 7px;
     }
   }
+
+  .magic-editor-layer-tree {
+    padding-top: 48px;
+  }
+
   .node-content {
     flex: 1;
     display: flex;

package/src/theme/layout.scss

@@ -0,0 +1,5 @@
+.m-editor-layout {
+  width: 100%;
+  display: flex;
+  justify-self: space-between;
+}

package/src/theme/theme.scss

@@ -0,0 +1,16 @@
+@import "./nav-menu.scss";
+@import "./framework.scss";
+@import "./sidebar.scss";
+@import "./layer-panel.scss";
+@import "./component-list-panel.scss";
+@import "./resizer.scss";
+@import "./workspace.scss";
+@import "./page-bar.scss";
+@import "./props-panel.scss";
+@import "./content-menu.scss";
+@import "./stage.scss";
+@import "./code-editor.scss";
+@import "./icon.scss";
+@import "./code-block.scss";
+@import "./layout.scss";
+@import "./breadcrumb.scss";

package/src/type.ts

@@ -23,6 +23,7 @@ import type { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import type { ContainerHighlightType, MoveableOptions } from '@tmagic/stage';
 
+import type { CodeBlockService } from './services/codeBlock';
 import type { ComponentListService } from './services/componentList';
 import type { EditorService } from './services/editor';
 import type { EventsService } from './services/events';
@@ -46,6 +47,7 @@ export interface Services {
   propsService: PropsService;
   componentListService: ComponentListService;
   uiService: UiService;
+  codeBlockService: CodeBlockService;
 }
 
 export interface StageOptions {
@@ -198,6 +200,7 @@ export interface MenuComponent {
   /** 是否显示，默认为true */
   className?: string;
   display?: boolean | ((data?: Services) => Promise<boolean> | boolean);
+  [key: string]: any;
 }
 
 /**
@@ -243,7 +246,7 @@ export interface SideComponent extends MenuComponent {
  * component-list: 组件列表
  * layer: 已选组件树
  */
-export type SideItem = 'component-list' | 'layer' | SideComponent;
+export type SideItem = 'component-list' | 'layer' | 'code-block' | SideComponent;
 
 /** 工具栏 */
 export interface SideBarData {
@@ -305,3 +308,87 @@ export interface ScrollViewerEvent {
   scrollHeight: number;
   scrollWidth: number;
 }
+
+export interface CodeBlockDSL {
+  [id: string]: CodeBlockContent;
+}
+
+export interface CodeBlockContent {
+  /** 代码块名称 */
+  name: string;
+  /** 代码块内容 */
+  content: string;
+  /** 代码块与组件的绑定关系 */
+  comps?: CodeRelation;
+  /** 扩展字段 */
+  [propName: string]: any;
+}
+
+export type CodeState = {
+  /** 是否展示代码块编辑区 */
+  isShowCodeEditor: boolean;
+  /** 代码块DSL数据源 */
+  codeDsl: CodeBlockDSL | null;
+  /** 当前选中的代码块id */
+  id: string;
+  /** 代码块是否可编辑 */
+  editable: boolean;
+  /** 代码编辑面板的展示模式 */
+  mode: CodeEditorMode;
+  /** list模式下左侧展示的代码列表 */
+  combineIds: string[];
+  /** 为业务逻辑预留的不可删除的代码块列表，由业务逻辑维护（如代码块上线后不可删除） */
+  undeletableList: string[];
+};
+
+export type CodeRelation = {
+  /** 组件id:['created'] */
+  [compId: string | number]: string[];
+};
+
+export enum CodeEditorMode {
+  /** 左侧菜单，右侧代码 */
+  LIST = 'list',
+  /** 全屏代码 */
+  EDITOR = 'editor',
+}
+
+export interface CodeDslList {
+  /** 代码块id */
+  id: string;
+  /** 代码块名称 */
+  name: string;
+  /** 代码块函数内容 */
+  codeBlockContent?: CodeBlockContent;
+  /** 是否展示代码绑定关系 */
+  showRelation?: boolean;
+}
+
+export interface ListState {
+  /** 代码块列表 */
+  codeList: CodeDslList[];
+}
+
+export interface ListRelationState extends ListState {
+  /** 与代码块绑定的组件id信息 */
+  bindComps: {
+    /** 代码块id : 组件信息 */
+    [id: string]: MNode[];
+  };
+}
+
+export enum CodeDeleteErrorType {
+  /** 代码块存在于不可删除列表中 */
+  UNDELETEABLE = 'undeleteable',
+  /** 代码块存在绑定关系 */
+  BIND = 'bind',
+}
+
+export enum CodeSelectOp {
+  /** 增加 */
+  ADD = 'add',
+  /** 删除 */
+  DELETE = 'delete',
+  /** 单选修改 */
+  CHANGE = 'change',
+}

package/src/utils/props.ts

@@ -221,13 +221,19 @@ export const fillConfig = (config: FormConfig = []) => [
       },
       {
         title: '高级',
-        labelWidth: '80px',
+        lazy: true,
         items: [
           {
-            type: 'code-link',
             name: 'created',
             text: 'created',
-            formTitle: 'created',
+            type: 'code-select',
+            labelWidth: '100px',
+          },
+          {
+            name: 'mounted',
+            text: 'mounted',
+            type: 'code-select',
+            labelWidth: '100px',
           },
         ],
       },

package/src/utils/scroll-viewer.ts

@@ -4,6 +4,10 @@ interface ScrollViewerOptions {
   container: HTMLDivElement;
   target: HTMLDivElement;
   zoom: number;
+  correctionScrollSize?: {
+    width: number;
+    height: number;
+  };
 }
 
 export class ScrollViewer extends EventEmitter {
@@ -23,6 +27,11 @@ export class ScrollViewer extends EventEmitter {
   private translateXCorrectionValue = 0;
   private translateYCorrectionValue = 0;
 
+  private correctionScrollSize = {
+    width: 0,
+    height: 0,
+  };
+
   private resizeObserver = new ResizeObserver(() => {
     this.setSize();
     this.setScrollSize();
@@ -35,6 +44,13 @@ export class ScrollViewer extends EventEmitter {
     this.target = options.target;
     this.zoom = options.zoom;
 
+    if (this.correctionScrollSize) {
+      this.correctionScrollSize = {
+        ...this.correctionScrollSize,
+        ...options.correctionScrollSize,
+      };
+    }
+
     this.container.addEventListener('wheel', this.wheelHandler, false);
 
     this.setSize();
@@ -109,9 +125,9 @@ export class ScrollViewer extends EventEmitter {
 
   private setScrollSize = () => {
     const targetRect = this.target.getBoundingClientRect();
-    this.scrollWidth = targetRect.width * this.zoom + 100;
+    this.scrollWidth = targetRect.width * this.zoom + this.correctionScrollSize.width;
     const targetMarginTop = Number(this.target.style.marginTop) || 0;
-    this.scrollHeight = (targetRect.height + targetMarginTop) * this.zoom + 100;
+    this.scrollHeight = (targetRect.height + targetMarginTop) * this.zoom + this.correctionScrollSize.height;
 
     let left: number | undefined;
     let top: number | undefined;

package/src/utils/stage.ts

@@ -46,6 +46,7 @@ export const useStage = (stageOptions: StageOptions) => {
   ]);
 
   stage.on('select', (el: HTMLElement) => {
+    if (`${editorService.get('node')?.id}` === el.id && editorService.get('nodes').length === 1) return;
     editorService.select(el.id);
   });
 
@@ -72,6 +73,12 @@ export const useStage = (stageOptions: StageOptions) => {
     editorService.sort(ev.src, ev.dist);
   });
 
+  stage.on('select-parent', () => {
+    const parent = editorService.get('parent');
+    editorService.select(parent);
+    editorService.get<StageCore>('stage').select(parent.id);
+  });
+
   stage.on('changeGuides', (e) => {
     uiService.set('showGuides', true);
 

package/types/Editor.vue.d.ts

@@ -97,7 +97,7 @@ declare const _default: import("vue").DefineComponent<{
     updateDragEl: {
         type: PropType<(el: HTMLDivElement, target: HTMLElement) => void>;
     };
-}, Services, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("props-panel-mounted" | "update:modelValue")[], "props-panel-mounted" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, Services, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "props-panel-mounted")[], "update:modelValue" | "props-panel-mounted", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     /** 页面初始值 */
     modelValue: {
         type: PropType<MApp>;
@@ -191,8 +191,8 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<(el: HTMLDivElement, target: HTMLElement) => void>;
     };
 }>> & {
-    "onProps-panel-mounted"?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onProps-panel-mounted"?: ((...args: any[]) => any) | undefined;
 }, {
     menu: MenuBarData;
     codeOptions: Record<string, any>;

package/types/components/ContentMenu.vue.d.ts

@@ -96,9 +96,7 @@ declare const _default: {
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("hide" | "show")[], "hide" | "show", {
     menuData: (MenuButton | MenuComponent)[];
     isSubMenu: boolean;
-}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
-    $slots: {};
-});
+}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
 export default _default;
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 declare type __VLS_TypePropsToRuntimeProps<T> = {

package/types/components/Icon.vue.d.ts

@@ -48,9 +48,7 @@ declare const _default: {
     __isSuspense?: undefined;
 } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     icon?: any;
-}>>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
-    $slots: {};
-});
+}>>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
 export default _default;
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 declare type __VLS_TypePropsToRuntimeProps<T> = {

package/types/components/ScrollBar.vue.d.ts

@@ -68,9 +68,7 @@ declare const _default: {
     pos: number;
 }>>> & {
     onScroll?: ((...args: any[]) => any) | undefined;
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "scroll"[], "scroll", {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
-    $slots: {};
-});
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "scroll"[], "scroll", {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
 export default _default;
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 declare type __VLS_TypePropsToRuntimeProps<T> = {