@tmagic/editor 1.1.6 → 1.2.0-beta.1

package/types/services/codeBlock.d.ts

@@ -0,0 +1,155 @@
+import { Id, MNode } from '@tmagic/schema';
+import type { CodeBlockContent, CodeBlockDSL } from '../type';
+import { CodeEditorMode, CodeSelectOp } from '../type';
+import BaseService from './BaseService';
+declare class CodeBlock extends BaseService {
+    private state;
+    constructor();
+    /**
+     * 设置活动的代码块dsl数据源
+     * @param {CodeBlockDSL} codeDsl 代码DSL
+     * @returns {void}
+     */
+    setCodeDsl(codeDsl: CodeBlockDSL): Promise<void>;
+    /**
+     * 获取活动的代码块dsl数据源（默认从dsl中的codeBlock字段读取）
+     * @param {boolean} forceRefresh 是否强制从活动dsl拉取刷新
+     * @returns {CodeBlockDSL | null}
+     */
+    getCodeDsl(forceRefresh?: boolean): Promise<CodeBlockDSL | null>;
+    /**
+     * 根据代码块id获取代码块内容
+     * @param {string} id 代码块id
+     * @returns {CodeBlockContent | null}
+     */
+    getCodeContentById(id: string): Promise<CodeBlockContent | null>;
+    /**
+     * 设置代码块ID和代码内容到源dsl
+     * @param {string} id 代码块id
+     * @param {CodeBlockContent} codeConfig 代码块内容配置信息
+     * @returns {void}
+     */
+    setCodeDslById(id: string, codeConfig: CodeBlockContent): Promise<void>;
+    /**
+     * 根据代码块id数组获取代码dsl
+     * @param {string[]} ids 代码块id数组
+     * @returns {CodeBlockDSL}
+     */
+    getCodeDslByIds(ids: string[]): Promise<CodeBlockDSL>;
+    /**
+     * 设置代码编辑面板展示状态
+     * @param {boolean} status 是否展示代码编辑面板
+     * @returns {void}
+     */
+    setCodeEditorShowStatus(status: boolean): Promise<void>;
+    /**
+     * 获取代码编辑面板展示状态
+     * @returns {boolean} 是否展示代码编辑面板
+     */
+    getCodeEditorShowStatus(): boolean;
+    /**
+     * 设置代码编辑面板展示状态及展示内容
+     * @param {boolean} status 是否展示代码编辑面板
+     * @param {string} id 代码块id
+     * @returns {void}
+     */
+    setCodeEditorContent(status: boolean, id: string): void;
+    /**
+     * 获取当前选中的代码块内容
+     * @returns {CodeBlockContent | null}
+     */
+    getCurrentDsl(): Promise<CodeBlockContent | null>;
+    /**
+     * 获取编辑状态
+     * @returns {boolean} 是否可编辑
+     */
+    getEditStatus(): boolean;
+    /**
+     * 设置编辑状态
+     * @param {boolean} 是否可编辑
+     * @returns {void}
+     */
+    setEditStatus(status: boolean): Promise<void>;
+    /**
+     * 设置当前选中的代码块ID
+     * @param {string} id 代码块id
+     * @returns {void}
+     */
+    setId(id: string): void;
+    /**
+     * 获取当前选中的代码块ID
+     * @returns {string} id 代码块id
+     */
+    getId(): string;
+    /**
+     * 获取当前模式
+     * @returns {CodeEditorMode}
+     */
+    getMode(): CodeEditorMode;
+    /**
+     * 设置当前模式
+     * @param {CodeEditorMode} mode 模式
+     * @returns {void}
+     */
+    setMode(mode: CodeEditorMode): Promise<void>;
+    /**
+     * 设置当前选中组件已关联绑定的代码块id数组
+     * @param {string[]} ids 代码块id数组
+     * @returns {void}
+     */
+    setCombineIds(ids: string[]): Promise<void>;
+    /**
+     * 获取当前选中组件已关联绑定的代码块id数组
+     * @returns {string[]}
+     */
+    getCombineIds(): string[];
+    /**
+     * 设置绑定关系
+     * @param {Id} 组件id
+     * @param {string[]} diffCodeIds 代码块id数组
+     * @param {CodeSelectOp} opFlag 操作类型
+     * @param {string} hook 代码块挂载hook名称
+     * @returns {void}
+     */
+    setCombineRelation(compId: Id, diffCodeIds: string[], opFlag: CodeSelectOp, hook: string): Promise<void>;
+    /**
+     * 获取不可删除列表
+     * @returns {string[]}
+     */
+    getUndeletableList(): string[];
+    /**
+     * 设置不可删除列表：为业务逻辑预留的不可删除的代码块列表，由业务逻辑维护（如代码块上线后不可删除）
+     * @param {string[]} codeIds 代码块id数组
+     * @returns {void}
+     */
+    setUndeleteableList(codeIds: string[]): Promise<void>;
+    /**
+     * 在dsl数据源中删除指定id的代码块
+     * @param {string[]} codeIds 需要删除的代码块id数组
+     * @returns {CodeBlockDSL} 删除后的code dsl
+     */
+    deleteCodeDslByIds(codeIds: string[]): Promise<CodeBlockDSL>;
+    /**
+     * 生成代码块唯一id
+     * @returns {string} 代码块唯一id
+     */
+    getUniqueId(): Promise<string>;
+    /**
+     * 一对一解除绑定关系  功能隐藏，暂时注释
+     * @param {string} compId 组件id
+     * @param {string} codeId 代码块id
+     * @param {string[]} codeHooks 代码块挂载hook名称
+     * @returns {boolean} 结果
+     */
+    /**
+     * 通过组件id解除绑定关系（删除组件）
+     * @param {MNode} compId 组件节点
+     * @returns void
+     */
+    deleteCompsInRelation(node: MNode): Promise<void>;
+    destroy(): void;
+    private recurseNodes;
+}
+export declare type CodeBlockService = CodeBlock;
+declare const _default: CodeBlock;
+export default _default;

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中的codeBlock字段读取活动的代码块
+     * @returns {CodeBlockDSL | null}
+     */
+    getCodeDsl(): Promise<CodeBlockDSL | null>;
+    /**
+     * 设置代码块到dsl的codeBlock字段
+     * @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/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;
@@ -190,7 +192,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 +245,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;
+    /** 代码块函数内容 */
+    content: any;
+    /** 是否展示代码绑定关系 */
+    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;
     })[];
 }[];