@tmagic/editor 1.1.6 → 1.2.0-beta.10

package/types/services/editor.d.ts

@@ -1,4 +1,4 @@
-import type { Id, MContainer, MNode } from '@tmagic/schema';
+import type { CodeBlockDSL, Id, MContainer, MNode } from '@tmagic/schema';
 import { StepValue } from '../services/history';
 import type { AddMNode, EditorNodeInfo, PastePosition, StoreState } from '../type';
 import { LayerOffset, Layout } from '../type';
@@ -138,6 +138,17 @@ declare class Editor extends BaseService {
     move(left: number, top: number): Promise<void>;
     destroy(): void;
     resetModifiedNodeId(): void;
+    /**
+     * 从dsl中的codeBlocks字段读取活动的代码块
+     * @returns {CodeBlockDSL | null}
+     */
+    getCodeDsl(): Promise<CodeBlockDSL | null>;
+    /**
+     * 设置代码块到dsl的codeBlocks字段
+     * @param {CodeBlockDSL} codeDsl 代码DSL
+     * @returns {void}
+     */
+    setCodeDsl(codeDsl: CodeBlockDSL): Promise<void>;
     private addModifiedNodeId;
     private pushHistoryState;
     private changeHistoryState;

package/types/services/props.d.ts

@@ -13,6 +13,7 @@ declare class Props extends BaseService {
             items: (import("@tmagic/form").ChildConfig & {
                 [key: string]: any;
             })[];
+            lazy?: undefined;
         } | {
             title: string;
             items: {
@@ -34,6 +35,17 @@ declare class Props extends BaseService {
                 })[];
             }[];
             labelWidth?: undefined;
+            lazy?: undefined;
+        } | {
+            title: string;
+            lazy: boolean;
+            items: {
+                name: string;
+                text: string;
+                type: string;
+                labelWidth: string;
+            }[];
+            labelWidth?: undefined;
         })[];
     }[]>;
     /**

package/types/services/ui.d.ts

@@ -19,7 +19,7 @@ declare const state: {
     };
     showGuides: boolean;
     showRule: boolean;
-    propsPanelSize: "small" | "large" | "default";
+    propsPanelSize: "small" | "default" | "large";
     showAddPageButton: boolean;
 };
 declare class Ui extends BaseService {

package/types/type.d.ts

@@ -3,6 +3,7 @@ import type { FormConfig } from '@tmagic/form';
 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';
@@ -23,6 +24,7 @@ export interface Services {
     propsService: PropsService;
     componentListService: ComponentListService;
     uiService: UiService;
+    codeBlockService: CodeBlockService;
 }
 export interface StageOptions {
     runtimeUrl: string;
@@ -161,6 +163,7 @@ export interface MenuComponent {
     /** 是否显示，默认为true */
     className?: string;
     display?: boolean | ((data?: Services) => Promise<boolean> | boolean);
+    [key: string]: any;
 }
 /**
  * '/': 分隔符
@@ -190,7 +193,7 @@ export interface SideComponent extends MenuComponent {
  * component-list: 组件列表
  * layer: 已选组件树
  */
-export declare type SideItem = 'component-list' | 'layer' | SideComponent;
+export declare type SideItem = 'component-list' | 'layer' | 'code-block' | SideComponent;
 /** 工具栏 */
 export interface SideBarData {
     /** 容器类型 */
@@ -243,3 +246,77 @@ 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 declare type CodeState = {
+    /** 是否展示代码块编辑区 */
+    isShowCodeEditor: boolean;
+    /** 代码块DSL数据源 */
+    codeDsl: CodeBlockDSL | null;
+    /** 当前选中的代码块id */
+    id: string;
+    /** 代码块是否可编辑 */
+    editable: boolean;
+    /** 代码编辑面板的展示模式 */
+    mode: CodeEditorMode;
+    /** list模式下左侧展示的代码列表 */
+    combineIds: string[];
+    /** 为业务逻辑预留的不可删除的代码块列表，由业务逻辑维护（如代码块上线后不可删除） */
+    undeletableList: string[];
+};
+export declare type CodeRelation = {
+    /** 组件id:['created'] */
+    [compId: string | number]: string[];
+};
+export declare 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 declare enum CodeDeleteErrorType {
+    /** 代码块存在于不可删除列表中 */
+    UNDELETEABLE = "undeleteable",
+    /** 代码块存在绑定关系 */
+    BIND = "bind"
+}
+export declare enum CodeSelectOp {
+    /** 增加 */
+    ADD = "add",
+    /** 删除 */
+    DELETE = "delete",
+    /** 单选修改 */
+    CHANGE = "change"
+}

package/types/utils/props.d.ts

@@ -12,6 +12,7 @@ export declare const fillConfig: (config?: FormConfig) => {
         items: (import("@tmagic/form").ChildConfig & {
             [key: string]: any;
         })[];
+        lazy?: undefined;
     } | {
         title: string;
         items: {
@@ -33,5 +34,16 @@ export declare const fillConfig: (config?: FormConfig) => {
             })[];
         }[];
         labelWidth?: undefined;
+        lazy?: undefined;
+    } | {
+        title: string;
+        lazy: boolean;
+        items: {
+            name: string;
+            text: string;
+            type: string;
+            labelWidth: string;
+        }[];
+        labelWidth?: undefined;
     })[];
 }[];

package/types/utils/scroll-viewer.d.ts

@@ -4,6 +4,10 @@ interface ScrollViewerOptions {
     container: HTMLDivElement;
     target: HTMLDivElement;
     zoom: number;
+    correctionScrollSize?: {
+        width: number;
+        height: number;
+    };
 }
 export declare class ScrollViewer extends EventEmitter {
     private container;
@@ -17,6 +21,7 @@ export declare class ScrollViewer extends EventEmitter {
     private height;
     private translateXCorrectionValue;
     private translateYCorrectionValue;
+    private correctionScrollSize;
     private resizeObserver;
     constructor(options: ScrollViewerOptions);
     destroy(): void;

package/src/layouts/sidebar/TabPane.vue

@@ -1,99 +0,0 @@
-<template>
-  <el-tab-pane v-if="config" :name="config.text">
-    <template #label>
-      <div :key="config.text">
-        <m-icon v-if="config.icon" :icon="config.icon"></m-icon>
-        <div v-if="config.text" class="magic-editor-tab-panel-title">{{ config.text }}</div>
-      </div>
-    </template>
-
-    <component :is="config.component" v-bind="config.props || {}" v-on="config?.listeners || {}">
-      <template #component-list-panel-header v-if="data === 'component-list' || config.slots?.componentListPanelHeader">
-        <slot v-if="data === 'component-list'" name="component-list-panel-header"></slot>
-        <component v-else-if="config.slots?.componentListPanelHeader" :is="config.slots.componentListPanelHeader" />
-      </template>
-
-      <template
-        #component-list-item="{ component }"
-        v-if="data === 'component-list' || config.slots?.componentListItem"
-      >
-        <slot v-if="data === 'component-list'" name="component-list-item" :component="component"></slot>
-        <component
-          v-else-if="config.slots?.componentListItem"
-          :is="config.slots.componentListItem"
-          :component="component"
-        />
-      </template>
-
-      <template #layer-panel-header v-if="data === 'layer' || config.slots?.layerPanelHeader">
-        <slot v-if="data === 'layer'" name="layer-panel-header"></slot>
-        <component v-else-if="config.slots?.layerPanelHeader" :is="config.slots.layerPanelHeader" />
-      </template>
-
-      <template
-        #layer-node-content="{ data: nodeData, node }"
-        v-if="data === 'layer' || config.slots?.layerNodeContent"
-      >
-        <slot v-if="data === 'layer'" name="layer-node-content" :data="nodeData" :node="node"></slot>
-        <component
-          v-else-if="config.slots?.layerNodeContent"
-          :is="config.slots.layerNodeContent"
-          :data="nodeData"
-          :node="node"
-        />
-      </template>
-    </component>
-  </el-tab-pane>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-import { Coin, Files } from '@element-plus/icons-vue';
-
-import MIcon from '../../components/Icon.vue';
-import { SideComponent, SideItem } from '../../type';
-
-import ComponentListPanel from './ComponentListPanel.vue';
-import LayerPanel from './LayerPanel.vue';
-
-export default defineComponent({
-  components: { MIcon },
-
-  props: {
-    data: {
-      type: [Object, String] as PropType<SideItem>,
-    },
-  },
-
-  setup(props) {
-    return {
-      config: computed<SideComponent | undefined>(() => {
-        if (typeof props.data !== 'string') {
-          return props.data;
-        }
-
-        switch (props.data) {
-          case 'component-list':
-            return {
-              type: 'component',
-              icon: Coin,
-              text: '组件',
-              component: ComponentListPanel,
-              slots: {},
-            };
-          case 'layer':
-            return {
-              type: 'component',
-              icon: Files,
-              text: '已选组件',
-              component: LayerPanel,
-              slots: {},
-            };
-          default:
-            return undefined;
-        }
-      }),
-    };
-  },
-});
-</script>

package/types/layouts/sidebar/TabPane.vue.d.ts

@@ -1,14 +0,0 @@
-import { PropType } from 'vue';
-import { SideComponent, SideItem } from '../../type';
-declare const _default: import("vue").DefineComponent<{
-    data: {
-        type: PropType<SideItem>;
-    };
-}, {
-    config: import("vue").ComputedRef<SideComponent | undefined>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    data: {
-        type: PropType<SideItem>;
-    };
-}>>, {}>;
-export default _default;