@alilc/lowcode-editor-skeleton
Version:
alibaba lowcode editor skeleton
410 lines (407 loc) • 15.3 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.SkeletonEvents = exports.Skeleton = void 0;
var _divider = _interopRequireDefault(require("@alifd/next/lib/divider"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _initializerDefineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/initializerDefineProperty"));
var _applyDecoratedDescriptor2 = _interopRequireDefault(require("@babel/runtime/helpers/applyDecoratedDescriptor"));
var _initializerWarningHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/initializerWarningHelper"));
var _lowcodeEditorCore = require("@alilc/lowcode-editor-core");
var _types = require("./types");
var _panel = require("./widget/panel");
var _widgetContainer = require("./widget/widget-container");
var _area = require("./area");
var _widget = require("./widget/widget");
var _panelDock = require("./widget/panel-dock");
var _dock = require("./widget/dock");
var _stage = require("./widget/stage");
var _react = require("react");
var _lowcodeUtils = require("@alilc/lowcode-utils");
var _excluded = ["dialogProps", "balloonProps", "panelProps", "linkProps"],
_excluded2 = ["content"];
var _class, _descriptor;
var logger = new _lowcodeUtils.Logger({
level: 'warn',
bizName: 'skeleton'
});
var SkeletonEvents = exports.SkeletonEvents = /*#__PURE__*/function (SkeletonEvents) {
SkeletonEvents["PANEL_DOCK_ACTIVE"] = "skeleton.panel-dock.active";
SkeletonEvents["PANEL_DOCK_UNACTIVE"] = "skeleton.panel-dock.unactive";
SkeletonEvents["PANEL_SHOW"] = "skeleton.panel.show";
SkeletonEvents["PANEL_HIDE"] = "skeleton.panel.hide";
SkeletonEvents["WIDGET_SHOW"] = "skeleton.widget.show";
SkeletonEvents["WIDGET_HIDE"] = "skeleton.widget.hide";
SkeletonEvents["WIDGET_DISABLE"] = "skeleton.widget.disable";
SkeletonEvents["WIDGET_ENABLE"] = "skeleton.widget.enable";
return SkeletonEvents;
}({});
var Skeleton = exports.Skeleton = (_class = /*#__PURE__*/function () {
function Skeleton(editor, viewName) {
var _this = this;
if (viewName === void 0) {
viewName = 'global';
}
this.editor = editor;
this.viewName = viewName;
this.panels = new Map();
this.configTransducers = [];
this.containers = new Map();
this.leftArea = void 0;
this.topArea = void 0;
this.subTopArea = void 0;
this.toolbar = void 0;
this.leftFixedArea = void 0;
this.leftFloatArea = void 0;
this.rightArea = void 0;
(0, _initializerDefineProperty2["default"])(this, "mainArea", _descriptor, this);
this.bottomArea = void 0;
this.stages = void 0;
this.widgets = [];
this.focusTracker = new _lowcodeEditorCore.FocusTracker();
(0, _lowcodeEditorCore.makeObservable)(this);
this.leftArea = new _area.Area(this, 'leftArea', function (config) {
if ((0, _widget.isWidget)(config)) {
return config;
}
return _this.createWidget(config);
}, false);
this.topArea = new _area.Area(this, 'topArea', function (config) {
if ((0, _widget.isWidget)(config)) {
return config;
}
return _this.createWidget(config);
}, false);
this.subTopArea = new _area.Area(this, 'subTopArea', function (config) {
if ((0, _widget.isWidget)(config)) {
return config;
}
return _this.createWidget(config);
}, false);
this.toolbar = new _area.Area(this, 'toolbar', function (config) {
if ((0, _widget.isWidget)(config)) {
return config;
}
return _this.createWidget(config);
}, false);
this.leftFixedArea = new _area.Area(this, 'leftFixedArea', function (config) {
if ((0, _panel.isPanel)(config)) {
return config;
}
return _this.createPanel(config);
}, true);
this.leftFloatArea = new _area.Area(this, 'leftFloatArea', function (config) {
if ((0, _panel.isPanel)(config)) {
return config;
}
return _this.createPanel(config);
}, true);
this.rightArea = new _area.Area(this, 'rightArea', function (config) {
if ((0, _panel.isPanel)(config)) {
return config;
}
return _this.createPanel(config);
}, false, true);
this.mainArea = new _area.Area(this, 'mainArea', function (config) {
if ((0, _widget.isWidget)(config)) {
return config;
}
return _this.createWidget(config);
}, true, true);
this.bottomArea = new _area.Area(this, 'bottomArea', function (config) {
if ((0, _panel.isPanel)(config)) {
return config;
}
return _this.createPanel(config);
}, true);
this.stages = new _area.Area(this, 'stages', function (config) {
if ((0, _widget.isWidget)(config)) {
return config;
}
return new _stage.Stage(_this, config);
});
this.setupPlugins();
this.setupEvents();
this.focusTracker.mount(window);
}
/**
* setup events
*
* @memberof Skeleton
*/
var _proto = Skeleton.prototype;
_proto.setupEvents = function setupEvents() {
var _this2 = this;
// adjust pinned status when panel shown
this.editor.eventBus.on(SkeletonEvents.PANEL_SHOW, function (panelName, panel) {
var _engineConfig$getPref;
var panelNameKey = panelName + "-pinned-status-isFloat";
var isInFloatAreaPreferenceExists = (_engineConfig$getPref = _lowcodeEditorCore.engineConfig.getPreference()) === null || _engineConfig$getPref === void 0 ? void 0 : _engineConfig$getPref.contains(panelNameKey, 'skeleton');
if (isInFloatAreaPreferenceExists) {
var _engineConfig$getPref2;
var isInFloatAreaFromPreference = (_engineConfig$getPref2 = _lowcodeEditorCore.engineConfig.getPreference()) === null || _engineConfig$getPref2 === void 0 ? void 0 : _engineConfig$getPref2.get(panelNameKey, 'skeleton');
var isCurrentInFloatArea = panel === null || panel === void 0 ? void 0 : panel.isChildOfFloatArea();
if (isInFloatAreaFromPreference !== isCurrentInFloatArea) {
_this2.toggleFloatStatus(panel);
}
}
});
}
/**
* set isFloat status for panel
*
* @param {*} panel
* @memberof Skeleton
*/;
_proto.toggleFloatStatus = function toggleFloatStatus(panel) {
var _panel$parent;
var isFloat = (panel === null || panel === void 0 ? void 0 : (_panel$parent = panel.parent) === null || _panel$parent === void 0 ? void 0 : _panel$parent.name) === 'leftFloatArea';
if (isFloat) {
this.leftFloatArea.remove(panel);
this.leftFixedArea.add(panel);
this.leftFixedArea.container.active(panel);
} else {
this.leftFixedArea.remove(panel);
this.leftFloatArea.add(panel);
this.leftFloatArea.container.active(panel);
}
_lowcodeEditorCore.engineConfig.getPreference().set(panel.name + "-pinned-status-isFloat", !isFloat, 'skeleton');
};
_proto.buildFromConfig = function buildFromConfig(config, components) {
if (components === void 0) {
components = {};
}
if (config) {
this.editor.init(config, components);
}
this.setupPlugins();
};
_proto.setupPlugins = function setupPlugins() {
var _this3 = this;
var _this$editor = this.editor,
config = _this$editor.config,
_this$editor$componen = _this$editor.components,
components = _this$editor$componen === void 0 ? {} : _this$editor$componen;
if (!config) {
return;
}
var plugins = config.plugins;
if (!plugins) {
return;
}
Object.keys(plugins).forEach(function (area) {
plugins[area].forEach(function (item) {
var pluginKey = item.pluginKey,
type = item.type,
_item$props = item.props,
props = _item$props === void 0 ? {} : _item$props,
pluginProps = item.pluginProps;
var config = {
area: area,
type: 'Widget',
name: pluginKey,
contentProps: pluginProps
};
var dialogProps = props.dialogProps,
balloonProps = props.balloonProps,
panelProps = props.panelProps,
linkProps = props.linkProps,
restProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
config.props = restProps;
if (dialogProps) {
config.dialogProps = dialogProps;
}
if (balloonProps) {
config.balloonProps = balloonProps;
}
if (panelProps) {
config.panelProps = panelProps;
}
if (linkProps) {
config.linkProps = linkProps;
}
if (type === 'TabPanel') {
config.type = 'Panel';
} else if (/Icon$/.test(type)) {
config.type = type.replace('Icon', 'Dock');
}
if (pluginKey in components) {
config.content = components[pluginKey];
}
_this3.add(config);
});
});
};
_proto.postEvent = function postEvent(event) {
var _this$editor$eventBus;
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
(_this$editor$eventBus = this.editor.eventBus).emit.apply(_this$editor$eventBus, [event].concat(args));
};
_proto.createWidget = function createWidget(config) {
if ((0, _widget.isWidget)(config)) {
return config;
}
config = this.parseConfig(config);
var widget;
if ((0, _types.isDockConfig)(config)) {
if ((0, _types.isPanelDockConfig)(config)) {
widget = new _panelDock.PanelDock(this, config);
} else if (false) {
// DialogDock
// others...
} else {
widget = new _dock.Dock(this, config);
}
} else if ((0, _types.isDividerConfig)(config)) {
widget = new _widget.Widget(this, (0, _extends2["default"])({}, config, {
type: 'Widget',
content: _divider["default"]
}));
} else if ((0, _types.isPanelConfig)(config)) {
widget = this.createPanel(config);
} else {
widget = new _widget.Widget(this, config);
}
this.widgets.push(widget);
return widget;
};
_proto.getWidget = function getWidget(name) {
return this.widgets.find(function (widget) {
return widget.name === name;
});
};
_proto.createPanel = function createPanel(config) {
var parsedConfig = this.parseConfig(config);
var panel = new _panel.Panel(this, parsedConfig);
this.panels.set(panel.name, panel);
logger.debug("Panel created with name: " + panel.name + " \nconfig:", config, '\n current panels: ', this.panels);
return panel;
};
_proto.getPanel = function getPanel(name) {
return this.panels.get(name);
};
_proto.getStage = function getStage(name) {
return this.stages.container.get(name);
};
_proto.createStage = function createStage(config) {
var _stage$getName;
var stage = this.add((0, _extends2["default"])({
name: (0, _lowcodeUtils.uniqueId)('stage'),
area: 'stages'
}, config));
return stage === null || stage === void 0 ? void 0 : (_stage$getName = stage.getName) === null || _stage$getName === void 0 ? void 0 : _stage$getName.call(stage);
};
_proto.createContainer = function createContainer(name, handle, exclusive, checkVisible, defaultSetCurrent) {
if (exclusive === void 0) {
exclusive = false;
}
if (checkVisible === void 0) {
checkVisible = function checkVisible() {
return true;
};
}
if (defaultSetCurrent === void 0) {
defaultSetCurrent = false;
}
var container = new _widgetContainer.WidgetContainer(name, handle, exclusive, checkVisible, defaultSetCurrent);
this.containers.set(name, container);
return container;
};
_proto.parseConfig = function parseConfig(config) {
if (config.parsed) {
return config;
}
var content = config.content,
restConfig = (0, _objectWithoutPropertiesLoose2["default"])(config, _excluded2);
if (content) {
if ((0, _lowcodeUtils.isPlainObject)(content) && ! /*#__PURE__*/(0, _react.isValidElement)(content)) {
Object.keys(content).forEach(function (key) {
if (/props$/i.test(key) && restConfig[key]) {
restConfig[key] = (0, _extends2["default"])({}, restConfig[key], content[key]);
} else {
restConfig[key] = content[key];
}
});
} else {
restConfig.content = content;
}
}
restConfig.pluginKey = restConfig.name;
restConfig.parsed = true;
return restConfig;
};
_proto.registerConfigTransducer = function registerConfigTransducer(transducer, level, id) {
if (level === void 0) {
level = 100;
}
transducer.level = level;
transducer.id = id;
var i = this.configTransducers.findIndex(function (item) {
return item.level != null && item.level > level;
});
if (i < 0) {
this.configTransducers.push(transducer);
} else {
this.configTransducers.splice(i, 0, transducer);
}
};
_proto.getRegisteredConfigTransducers = function getRegisteredConfigTransducers() {
return this.configTransducers;
};
_proto.add = function add(config, extraConfig) {
var registeredTransducers = this.getRegisteredConfigTransducers();
var parsedConfig = registeredTransducers.reduce(function (prevConfig, current) {
return current(prevConfig);
}, (0, _extends2["default"])({}, this.parseConfig(config), extraConfig));
var area = parsedConfig.area;
if (!area) {
if (parsedConfig.type === 'Panel') {
area = 'leftFloatArea';
} else if (parsedConfig.type === 'Widget') {
area = 'mainArea';
} else {
area = 'leftArea';
}
}
switch (area) {
case 'leftArea':
case 'left':
return this.leftArea.add(parsedConfig);
case 'rightArea':
case 'right':
return this.rightArea.add(parsedConfig);
case 'topArea':
case 'top':
return this.topArea.add(parsedConfig);
case 'subTopArea':
return this.subTopArea.add(parsedConfig);
case 'toolbar':
return this.toolbar.add(parsedConfig);
case 'mainArea':
case 'main':
case 'center':
case 'centerArea':
return this.mainArea.add(parsedConfig);
case 'bottomArea':
case 'bottom':
return this.bottomArea.add(parsedConfig);
case 'leftFixedArea':
return this.leftFixedArea.add(parsedConfig);
case 'leftFloatArea':
return this.leftFloatArea.add(parsedConfig);
case 'stages':
return this.stages.add(parsedConfig);
default:
// do nothing
}
};
return Skeleton;
}(), _descriptor = (0, _applyDecoratedDescriptor2["default"])(_class.prototype, "mainArea", [_lowcodeEditorCore.obx], {
configurable: true,
enumerable: true,
writable: true,
initializer: null
}), (0, _applyDecoratedDescriptor2["default"])(_class.prototype, "toggleFloatStatus", [_lowcodeEditorCore.action], Object.getOwnPropertyDescriptor(_class.prototype, "toggleFloatStatus"), _class.prototype), _class);