@cicctencent/low-code-simulate-base 0.0.0-stage → 1.1.9-beta.5

package/dist/domain/PreviewDomain.d.ts

@@ -0,0 +1,208 @@
+import { Entity } from '@jt/ark-util';
+import { Communicator } from '@jt/postmessage-channel';
+import type { EditorConfig, Project, MenuData, CheckRequestItem, History } from '@jt/low-code-core';
+import ProjectDomain from './ProjectDomain';
+import DataHistoryDomain from './DataHistoryDomain';
+/**
+ * @public
+ */
+export interface PreviewDomainState<T = ProjectDomain> {
+    project: T;
+    communicator: Communicator;
+}
+/**
+ * @public
+ */
+export default class PreviewDomain extends Entity<PreviewDomainState> {
+    history: DataHistoryDomain<History>;
+    /**
+     *  @public
+     *  @param state - 初始化数据
+     */
+    constructor(state: PreviewDomainState);
+    /**
+     * @public
+     */
+    updateHistory(): void;
+    /**
+     *  @public
+     */
+    get projectDomain(): ProjectDomain;
+    /**
+     *  @public
+     */
+    get projectState(): {
+        projectData: {
+            meta: import("@jt/low-code-core").ProjectMeta;
+            pages: import("@jt/low-code-core").ProjectData;
+        };
+        currentComponentPath: string;
+    };
+    /**
+     * @public
+     * 添加历史记录
+     */
+    addHistory(): void;
+    /**
+     * @public
+     * 编辑器展示配置
+     */
+    get config(): EditorConfig;
+    /**
+     *  @public
+     *  获取项目数据
+     */
+    get projectData(): Project;
+    /**
+     * @public
+     * 更新激活状态。由于激活状态与历史记录变化关联度比较大，收敛到这里
+     * @param path - 路径
+     */
+    activate(path?: string): void;
+    /**
+     *  @public
+     */
+    subscribe: {
+        /**
+         *  @public
+         * @param param0 - 从模拟器发送过来的数据
+         * @returns
+         */
+        init: ({ data: project }: {
+            data: any;
+        }) => any;
+        /**
+         *  @public
+         * @param param0 - 从模拟器发送过来的数据
+         * @returns
+         */
+        click: ({ data: { key, value } }: {
+            data: {
+                key: any;
+                value: any;
+            };
+        }) => any;
+        /**
+         *  @public
+         *  @param param0 - 从模拟器发送过来的数据
+         */
+        drag: ({ data: { key, value } }: {
+            data: {
+                key: any;
+                value: any;
+            };
+        }) => void;
+        /**
+         * @public
+         * @param param0 - 从模拟器发送过来的数据
+         */
+        set: ({ data: { key, value } }: {
+            data: {
+                key: any;
+                value: any;
+            };
+        }) => void;
+        /**
+         * @public
+         * @param param0 - 从模拟器发送过来的数据
+         * @returns
+         */
+        contextmenu: ({ data: { key } }: {
+            data: {
+                key: any;
+            };
+        }) => MenuData;
+        /**
+         * @public
+         *  校验
+         */
+        validate: ({ data }: {
+            data: any;
+        }) => Promise<CheckRequestItem[]>;
+        /**
+         * @public
+        * 导航树移动组件
+        */
+        splice: ({ data }: {
+            data: any;
+        }) => void;
+        /**
+         * @public
+         * @param param0 - 从模拟器发送过来的数据
+         */
+        action: ({ data: { action, value } }: {
+            data: {
+                action: any;
+                value: any;
+            };
+        }) => void;
+    };
+    /**
+     * @public
+     * @param cmd - 命令字
+     * @param payload - 发送给模拟器的内容
+     * @returns
+     */
+    commit(cmd: any, payload: any): Promise<Record<string, any>>;
+    /**
+     * @public
+     */
+    publish: {
+        /**
+         * @public
+         * 在加载完时，告诉编辑器
+         * @returns
+         */
+        load: () => Promise<Record<string, any>>;
+        /**
+         *  @public
+         * 调用编辑器的交互方法，如让编辑器弹出toast等
+         * @param data - 发送给模拟器的内容
+         * @returns
+         */
+        action: (data: {
+            key: string;
+            value: any;
+        }) => Promise<Record<string, any>>;
+        /**
+         * @public
+         * 如果project发生变化，则需update通知编辑器
+         * @param forceUpdate - 是否强制更新
+         */
+        update: (forceUpdate?: boolean) => void;
+        /**
+         * @public
+         * @param imgUrl - 图片url
+         */
+        updateScreenShot: (imgUrl: string) => void;
+    };
+    /**
+     * @public
+     * @param currentProject - 当前项目信息
+     */
+    replaceProject(currentProject: History): void;
+    /**
+     *  @public
+     */
+    function: {
+        /**
+         * @public
+         */
+        simulatorSizeList: ({ key, value }: {
+            key: any;
+            value: any;
+        }) => void;
+        /**
+         * @public
+         */
+        title: () => void;
+        /**
+         *  @public
+         */
+        undo: () => void;
+        /**
+         * @public
+         */
+        redo: () => void;
+    };
+}

package/dist/domain/PreviewDomain.js

@@ -0,0 +1,492 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+// 模拟器预览实体
+import { log, error, Entity, cloneDeep, isEqual, toPlainObject, } from '@jt/ark-util';
+import { ComponentType } from '@jt/low-code-core';
+import DataHistoryDomain from './DataHistoryDomain';
+var logTag = '[low-code-preview PreviewDomain]';
+var logInfo = log(logTag);
+var logError = error(logTag);
+/**
+ * @public
+ */
+var PreviewDomain = /** @class */ (function (_super) {
+    __extends(PreviewDomain, _super);
+    /**
+     *  @public
+     *  @param state - 初始化数据
+     */
+    function PreviewDomain(state) {
+        var _this = _super.call(this, state) || this;
+        /**
+         *  @public
+         */
+        _this.subscribe = {
+            /**
+             *  @public
+             * @param param0 - 从模拟器发送过来的数据
+             * @returns
+             */
+            init: function (_a) {
+                var project = _a.data;
+                if (!isEqual(_this.projectData, project)) {
+                    // 空数据或者与旧数据相同，则不处理
+                    logInfo('init', project);
+                    _this.projectDomain.setProject(project);
+                    // 通知模拟器更新project数据
+                    _this.emit('updateProject', _this.projectDomain);
+                    // 通知编辑器更新config和project数据 config会改变两次
+                    _this.publish.update();
+                }
+                _this.history.reset();
+                _this.addHistory();
+                return toPlainObject(_this.config);
+            },
+            /**
+             *  @public
+             * @param param0 - 从模拟器发送过来的数据
+             * @returns
+             */
+            click: function (_a) {
+                var _b = _a.data, key = _b.key, value = _b.value;
+                logInfo('click', key, value, key);
+                if (['undo', 'redo'].includes(key.action)) {
+                    _this.function[key.action](key);
+                    // 不新增记录
+                    return toPlainObject(_this.config);
+                }
+                else if (key.module === 'function' && _this.function[key.action]) {
+                    _this.function[key.action]({ key: key, value: value });
+                }
+                else if (key.action in _this.projectDomain) {
+                    _this.projectDomain[key.action](key, value);
+                }
+                else {
+                    return null;
+                }
+                _this.addHistory(); // addHistory 会触发更新，这里就不用返回数据了。降低通讯成本
+            },
+            /**
+             *  @public
+             *  @param param0 - 从模拟器发送过来的数据
+             */
+            drag: function (_a) {
+                var _b = _a.data, key = _b.key, value = _b.value;
+                _this.projectDomain.componentDrag(key, value);
+                _this.addHistory();
+            },
+            /**
+             * @public
+             * @param param0 - 从模拟器发送过来的数据
+             */
+            set: function (_a) {
+                var _b = _a.data, key = _b.key, value = _b.value;
+                logInfo('set', key, value);
+                _this.projectDomain[key.action](key.path, value);
+                _this.addHistory(); // addHistory 会触发更新，这里就不用返回数据了
+            },
+            /**
+             * @public
+             * @param param0 - 从模拟器发送过来的数据
+             * @returns
+             */
+            contextmenu: function (_a) {
+                var key = _a.data.key;
+                var menus = [];
+                try {
+                    _this.projectDomain.activate(key);
+                    menus = _this.projectDomain.menuData;
+                    _this.activate();
+                }
+                catch (e) {
+                    logError(e);
+                }
+                return toPlainObject({
+                    config: _this.config,
+                    menus: menus,
+                });
+            },
+            /**
+             * @public
+             *  校验
+             */
+            validate: function (_a) {
+                var data = _a.data;
+                return __awaiter(_this, void 0, void 0, function () {
+                    var result;
+                    return __generator(this, function (_b) {
+                        switch (_b.label) {
+                            case 0: return [4 /*yield*/, this.send('validatePage', data)];
+                            case 1:
+                                result = _b.sent();
+                                logInfo('validate result', result, this.config);
+                                return [2 /*return*/, toPlainObject({ config: this.config, result: result })];
+                        }
+                    });
+                });
+            },
+            /**
+             * @public
+            * 导航树移动组件
+            */
+            splice: function (_a) {
+                var data = _a.data;
+                logInfo('splice', data);
+                var draggingNode = data.draggingNode, dropNode = data.dropNode, dropType = data.dropType;
+                var curentDropNodePath = dropNode.key.path;
+                if (dropType === 'inner' && dropNode.type === ComponentType.Container) {
+                    curentDropNodePath = "".concat(curentDropNodePath, ".children.0");
+                }
+                _this.projectDomain.moveTo(draggingNode.key.path, curentDropNodePath);
+                _this.addHistory(); // addHistory 会触发更新，这里就不用返回数据了
+            },
+            /**
+             * @public
+             * @param param0 - 从模拟器发送过来的数据
+             */
+            action: function (_a) {
+                var _b = _a.data, action = _b.action, value = _b.value;
+                logInfo('action', action, value);
+                _this.projectDomain.action(action, value);
+                _this.addHistory(); // addHistory 会触发更新，这里就不用返回数据了。降低通讯成本
+            }
+        };
+        /**
+         * @public
+         */
+        _this.publish = {
+            /**
+             * @public
+             * 在加载完时，告诉编辑器
+             * @returns
+             */
+            load: function () { return _this.commit('load', _this.config); },
+            /**
+             *  @public
+             * 调用编辑器的交互方法，如让编辑器弹出toast等
+             * @param data - 发送给模拟器的内容
+             * @returns
+             */
+            action: function (data) { return _this.commit('action', data); },
+            /**
+             * @public
+             * 如果project发生变化，则需update通知编辑器
+             * @param forceUpdate - 是否强制更新
+             */
+            update: function (forceUpdate) {
+                if (forceUpdate === void 0) { forceUpdate = false; }
+                try {
+                    _this.commit('update', {
+                        config: _this.config,
+                        project: _this.projectData,
+                        forceUpdate: forceUpdate,
+                    });
+                }
+                catch (err) {
+                    console.error(err);
+                }
+            },
+            /**
+             * @public
+             * @param imgUrl - 图片url
+             */
+            updateScreenShot: function (imgUrl) {
+                _this.commit('updateScreenShot', imgUrl);
+            },
+        };
+        /**
+         *  @public
+         */
+        _this.function = {
+            /**
+             * @public
+             */
+            simulatorSizeList: function (_a) {
+                var key = _a.key, value = _a.value;
+                _this.projectDomain.setProjectMeta(value);
+            },
+            /**
+             * @public
+             */
+            title: function () {
+                _this.publish.action(toPlainObject({ key: 'editTitle' }));
+            },
+            /**
+             *  @public
+             */
+            undo: function () {
+                var data = _this.history.undo();
+                if (data) {
+                    _this.replaceProject(cloneDeep(data));
+                }
+            },
+            /**
+             * @public
+             */
+            redo: function () {
+                var data = _this.history.redo();
+                if (data) {
+                    _this.replaceProject(cloneDeep(data));
+                }
+            },
+        };
+        _this.state = state;
+        _this.history = new DataHistoryDomain();
+        Object.entries(_this.subscribe).forEach(function (_a) {
+            var _b = __read(_a, 2), key = _b[0], value = _b[1];
+            _this.state.communicator.subscribe(key, value.bind(_this));
+        });
+        // 发送到编辑器
+        _this.projectDomain.on('emitEditor', function (cmd) {
+            var _a;
+            var params = [];
+            for (var _i = 1; _i < arguments.length; _i++) {
+                params[_i - 1] = arguments[_i];
+            }
+            _this.publish[cmd]
+                ? (_a = _this.publish)[cmd].apply(_a, __spreadArray([], __read(params), false)) : _this.commit(cmd, params === null || params === void 0 ? void 0 : params[0]);
+        });
+        // 发送到Preview
+        _this.projectDomain.on('emitPreview', _this.emit.bind(_this));
+        _this.projectDomain.on('updateHistory', _this.updateHistory.bind(_this));
+        return _this;
+    }
+    /**
+     * @public
+     */
+    PreviewDomain.prototype.updateHistory = function () {
+        this.history.update(this.projectState);
+        this.emit('updateProject', this.projectDomain);
+        this.publish.update();
+    };
+    Object.defineProperty(PreviewDomain.prototype, "projectDomain", {
+        /**
+         *  @public
+         */
+        get: function () {
+            return this.state.project;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(PreviewDomain.prototype, "projectState", {
+        /**
+         *  @public
+         */
+        get: function () {
+            var _a = this.projectData, meta = _a.meta, pages = _a.pages;
+            return {
+                projectData: {
+                    meta: meta,
+                    pages: pages,
+                }, currentComponentPath: this.projectDomain.currentComponentPath
+            };
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * @public
+     * 添加历史记录
+     */
+    PreviewDomain.prototype.addHistory = function () {
+        var currentProject = this.history.data || {};
+        var projectState = this.projectState;
+        // 获取组件信息
+        if (currentProject.currentComponentPath === projectState.currentComponentPath) {
+            var value = this.projectDomain.needUpdateHistory(currentProject);
+            // 如果返回true，表示更新历史记录，不新增
+            if (value) {
+                try {
+                    // 通知模拟器更新project数据
+                    this.emit('updateProject', this.projectDomain);
+                    // 通知编辑器更新config和project数据 config会改变两次
+                    this.publish.update();
+                }
+                catch (e) {
+                    console.error(e);
+                }
+                return;
+            }
+        }
+        if (this.history.add(projectState)) {
+            try {
+                // 通知模拟器更新project数据
+                this.emit('updateProject', this.projectDomain);
+                // 通知编辑器更新config和project数据 config会改变两次
+                this.publish.update();
+            }
+            catch (e) {
+                console.error(e);
+            }
+            this.activate();
+        }
+    };
+    Object.defineProperty(PreviewDomain.prototype, "config", {
+        /**
+         * @public
+         * 编辑器展示配置
+         */
+        get: function () {
+            var config = this.projectDomain.config;
+            var functionData = config.functionData;
+            if (functionData) {
+                // 设置撤销重做是否可点击
+                if (functionData.undo) {
+                    functionData.undo.clickable = this.history.canUndo;
+                }
+                if (functionData.redo) {
+                    functionData.redo.clickable = this.history.canRedo;
+                }
+            }
+            return config;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(PreviewDomain.prototype, "projectData", {
+        /**
+         *  @public
+         *  获取项目数据
+         */
+        get: function () {
+            return this.projectDomain.state.project;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * @public
+     * 更新激活状态。由于激活状态与历史记录变化关联度比较大，收敛到这里
+     * @param path - 路径
+     */
+    PreviewDomain.prototype.activate = function (path) {
+        var _a;
+        var project = this.state.project;
+        if (path) {
+            // 提供给外部用
+            project.activate({ path: path });
+            this.publish.update();
+        }
+        // 通知模拟器
+        this.emit('activate', (_a = project.currentComponent) === null || _a === void 0 ? void 0 : _a.componentId);
+    };
+    /**
+     * @public
+     * @param cmd - 命令字
+     * @param payload - 发送给模拟器的内容
+     * @returns
+     */
+    PreviewDomain.prototype.commit = function (cmd, payload) {
+        return __awaiter(this, void 0, void 0, function () {
+            var data;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        logInfo('publish begin', cmd, payload);
+                        return [4 /*yield*/, this.state.communicator.publish(cmd, toPlainObject(payload))];
+                    case 1:
+                        data = (_a.sent()).data;
+                        logInfo('publish end', cmd, payload, data);
+                        return [2 /*return*/, data];
+                }
+            });
+        });
+    };
+    /**
+     * @public
+     * @param currentProject - 当前项目信息
+     */
+    PreviewDomain.prototype.replaceProject = function (currentProject) {
+        try {
+            this.projectDomain.replaceProject(currentProject);
+            // 通知模拟器更新project数据
+            this.emit('updateProject', this.projectDomain);
+            this.commit('update', {
+                config: this.config,
+                project: currentProject === null || currentProject === void 0 ? void 0 : currentProject.projectData,
+                forceUpdate: true,
+            });
+            this.activate();
+        }
+        catch (e) {
+            console.error(e);
+        }
+    };
+    return PreviewDomain;
+}(Entity));
+export default PreviewDomain;