@alilc/lowcode-plugin-designer
Version:
alibaba lowcode editor designer plugin
167 lines (166 loc) • 7.56 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _react = _interopRequireWildcard(require("react"));
var _lowcodeEditorCore = require("@alilc/lowcode-editor-core");
var _lowcodeDesigner = require("@alilc/lowcode-designer");
var _lowcodeUtils = require("@alilc/lowcode-utils");
require("./index.scss");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var logger = (0, _lowcodeUtils.getLogger)({
level: 'warn',
bizName: 'plugin:plugin-designer'
});
var DesignerPlugin = exports["default"] = /*#__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;
}
(0, _inheritsLoose2["default"])(DesignerPlugin, _PureComponent);
var _proto = DesignerPlugin.prototype;
_proto.setupAssets = /*#__PURE__*/function () {
var _setupAssets = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
var _this2 = this;
var editor, assets, renderEnv, device, locale, designMode, deviceClassName, simulatorUrl, requestHandlersMap, components, packages, extraEnvironment, utils, state;
return _regenerator["default"].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 = _lowcodeEditorCore.engineConfig.get('renderEnv') || editor.get('renderEnv');
device = _lowcodeEditorCore.engineConfig.get('device') || editor.get('device');
locale = _lowcodeEditorCore.engineConfig.get('locale') || editor.get('locale');
designMode = _lowcodeEditorCore.engineConfig.get('designMode') || editor.get('designMode');
deviceClassName = _lowcodeEditorCore.engineConfig.get('deviceClassName') || editor.get('deviceClassName');
simulatorUrl = _lowcodeEditorCore.engineConfig.get('simulatorUrl') || editor.get('simulatorUrl'); // @TODO setupAssets 里设置 requestHandlersMap 不太合适
requestHandlersMap = _lowcodeEditorCore.engineConfig.get('requestHandlersMap') || editor.get('requestHandlersMap');
if (this._mounted) {
_context.next = 14;
break;
}
return _context.abrupt("return");
case 14:
_lowcodeEditorCore.engineConfig.onGot('locale', function (locale) {
_this2.setState({
locale: locale
});
});
_lowcodeEditorCore.engineConfig.onGot('requestHandlersMap', function (requestHandlersMap) {
_this2.setState({
requestHandlersMap: requestHandlersMap
});
});
_lowcodeEditorCore.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["default"].createElement(_lowcodeDesigner.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;
}(_react.PureComponent);
DesignerPlugin.displayName = void 0;