@alilc/lowcode-plugin-designer/es/index.js

alibaba lowcode editor designer plugin

import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { PureComponent } from 'react';
import { engineConfig } from '@alilc/lowcode-editor-core';
import { DesignerView } from '@alilc/lowcode-designer';
import { getLogger } from '@alilc/lowcode-utils';
import './index.scss';
var logger = getLogger({
  level: 'warn',
  bizName: 'plugin:plugin-designer'
});
var DesignerPlugin = /*#__PURE__*/function (_PureComponent) {
  function DesignerPlugin(props) {
    var _this;
    _this = _PureComponent.call(this, props) || this;
    _this.state = {
      componentMetadatas: null,
      library: null,
      extraEnvironment: null,
      renderEnv: 'default',
      device: 'default',
      locale: '',
      designMode: 'live',
      deviceClassName: '',
      simulatorUrl: null,
      requestHandlersMap: null
    };
    _this._mounted = true;
    _this.handleDesignerMount = function (designer) {
      var editor = _this.props.engineEditor;
      editor.set('designer', designer);
      editor.eventBus.emit('designer.ready', designer);
      editor.onGot('schema', function (schema) {
        designer.project.open(schema);
      });
    };
    _this.setupAssets();
    return _this;
  }
  _inheritsLoose(DesignerPlugin, _PureComponent);
  var _proto = DesignerPlugin.prototype;
  _proto.setupAssets = /*#__PURE__*/function () {
    var _setupAssets = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      var _this2 = this;
      var editor, assets, renderEnv, device, locale, designMode, deviceClassName, simulatorUrl, requestHandlersMap, components, packages, extraEnvironment, utils, state;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            editor = this.props.engineEditor;
            _context.prev = 1;
            _context.next = 4;
            return editor.onceGot('assets');
          case 4:
            assets = _context.sent;
            renderEnv = engineConfig.get('renderEnv') || editor.get('renderEnv');
            device = engineConfig.get('device') || editor.get('device');
            locale = engineConfig.get('locale') || editor.get('locale');
            designMode = engineConfig.get('designMode') || editor.get('designMode');
            deviceClassName = engineConfig.get('deviceClassName') || editor.get('deviceClassName');
            simulatorUrl = engineConfig.get('simulatorUrl') || editor.get('simulatorUrl'); // @TODO setupAssets 里设置 requestHandlersMap 不太合适
            requestHandlersMap = engineConfig.get('requestHandlersMap') || editor.get('requestHandlersMap');
            if (this._mounted) {
              _context.next = 14;
              break;
            }
            return _context.abrupt("return");
          case 14:
            engineConfig.onGot('locale', function (locale) {
              _this2.setState({
                locale: locale
              });
            });
            engineConfig.onGot('requestHandlersMap', function (requestHandlersMap) {
              _this2.setState({
                requestHandlersMap: requestHandlersMap
              });
            });
            engineConfig.onGot('device', function (device) {
              _this2.setState({
                device: device
              });
            });
            components = assets.components, packages = assets.packages, extraEnvironment = assets.extraEnvironment, utils = assets.utils;
            state = {
              componentMetadatas: components || [],
              library: packages || [],
              utilsMetadata: utils || [],
              extraEnvironment: extraEnvironment,
              renderEnv: renderEnv,
              device: device,
              designMode: designMode,
              deviceClassName: deviceClassName,
              simulatorUrl: simulatorUrl,
              requestHandlersMap: requestHandlersMap,
              locale: locale
            };
            this.setState(state);
            _context.next = 25;
            break;
          case 22:
            _context.prev = 22;
            _context.t0 = _context["catch"](1);
            logger.error(_context.t0);
          case 25:
          case "end":
            return _context.stop();
        }
      }, _callee, this, [[1, 22]]);
    }));
    function setupAssets() {
      return _setupAssets.apply(this, arguments);
    }
    return setupAssets;
  }();
  _proto.componentWillUnmount = function componentWillUnmount() {
    this._mounted = false;
  };
  _proto.render = function render() {
    var editor = this.props.engineEditor;
    var _this$state = this.state,
      componentMetadatas = _this$state.componentMetadatas,
      utilsMetadata = _this$state.utilsMetadata,
      library = _this$state.library,
      extraEnvironment = _this$state.extraEnvironment,
      renderEnv = _this$state.renderEnv,
      device = _this$state.device,
      designMode = _this$state.designMode,
      deviceClassName = _this$state.deviceClassName,
      simulatorUrl = _this$state.simulatorUrl,
      requestHandlersMap = _this$state.requestHandlersMap,
      locale = _this$state.locale;
    if (!library || !componentMetadatas) {
      // TODO: use a Loading
      return null;
    }
    return /*#__PURE__*/React.createElement(DesignerView, {
      onMount: this.handleDesignerMount,
      className: "lowcode-plugin-designer",
      editor: editor,
      name: editor.viewName,
      designer: editor.get('designer'),
      componentMetadatas: componentMetadatas,
      simulatorProps: {
        library: library,
        utilsMetadata: utilsMetadata,
        extraEnvironment: extraEnvironment,
        renderEnv: renderEnv,
        device: device,
        locale: locale,
        designMode: designMode,
        deviceClassName: deviceClassName,
        simulatorUrl: simulatorUrl,
        requestHandlersMap: requestHandlersMap
      }
    });
  };
  return DesignerPlugin;
}(PureComponent);
DesignerPlugin.displayName = void 0;
export { DesignerPlugin as default };