@alilc/lowcode-editor-skeleton
Version:
alibaba lowcode editor skeleton
405 lines (403 loc) • 14.4 kB
JavaScript
import _Divider from "@alifd/next/lib/divider";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _initializerDefineProperty from "@babel/runtime/helpers/initializerDefineProperty";
import _applyDecoratedDescriptor from "@babel/runtime/helpers/applyDecoratedDescriptor";
import _initializerWarningHelper from "@babel/runtime/helpers/initializerWarningHelper";
var _excluded = ["dialogProps", "balloonProps", "panelProps", "linkProps"],
_excluded2 = ["content"];
var _class, _descriptor;
import { action, makeObservable, obx, engineConfig, FocusTracker } from '@alilc/lowcode-editor-core';
import { isDockConfig, isPanelDockConfig, isPanelConfig, isDividerConfig } from './types';
import { isPanel, Panel } from './widget/panel';
import { WidgetContainer } from './widget/widget-container';
import { Area } from './area';
import { isWidget, Widget } from './widget/widget';
import { PanelDock } from './widget/panel-dock';
import { Dock } from './widget/dock';
import { Stage } from './widget/stage';
import { isValidElement } from 'react';
import { isPlainObject, uniqueId, Logger } from '@alilc/lowcode-utils';
var logger = new Logger({
level: 'warn',
bizName: 'skeleton'
});
export var 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;
}({});
export var 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;
_initializerDefineProperty(this, "mainArea", _descriptor, this);
this.bottomArea = void 0;
this.stages = void 0;
this.widgets = [];
this.focusTracker = new FocusTracker();
makeObservable(this);
this.leftArea = new Area(this, 'leftArea', function (config) {
if (isWidget(config)) {
return config;
}
return _this.createWidget(config);
}, false);
this.topArea = new Area(this, 'topArea', function (config) {
if (isWidget(config)) {
return config;
}
return _this.createWidget(config);
}, false);
this.subTopArea = new Area(this, 'subTopArea', function (config) {
if (isWidget(config)) {
return config;
}
return _this.createWidget(config);
}, false);
this.toolbar = new Area(this, 'toolbar', function (config) {
if (isWidget(config)) {
return config;
}
return _this.createWidget(config);
}, false);
this.leftFixedArea = new Area(this, 'leftFixedArea', function (config) {
if (isPanel(config)) {
return config;
}
return _this.createPanel(config);
}, true);
this.leftFloatArea = new Area(this, 'leftFloatArea', function (config) {
if (isPanel(config)) {
return config;
}
return _this.createPanel(config);
}, true);
this.rightArea = new Area(this, 'rightArea', function (config) {
if (isPanel(config)) {
return config;
}
return _this.createPanel(config);
}, false, true);
this.mainArea = new Area(this, 'mainArea', function (config) {
if (isWidget(config)) {
return config;
}
return _this.createWidget(config);
}, true, true);
this.bottomArea = new Area(this, 'bottomArea', function (config) {
if (isPanel(config)) {
return config;
}
return _this.createPanel(config);
}, true);
this.stages = new Area(this, 'stages', function (config) {
if (isWidget(config)) {
return config;
}
return new 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 = engineConfig.getPreference()) === null || _engineConfig$getPref === void 0 ? void 0 : _engineConfig$getPref.contains(panelNameKey, 'skeleton');
if (isInFloatAreaPreferenceExists) {
var _engineConfig$getPref2;
var isInFloatAreaFromPreference = (_engineConfig$getPref2 = 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);
}
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 = _objectWithoutPropertiesLoose(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 (isWidget(config)) {
return config;
}
config = this.parseConfig(config);
var widget;
if (isDockConfig(config)) {
if (isPanelDockConfig(config)) {
widget = new PanelDock(this, config);
} else if (false) {
// DialogDock
// others...
} else {
widget = new Dock(this, config);
}
} else if (isDividerConfig(config)) {
widget = new Widget(this, _extends({}, config, {
type: 'Widget',
content: _Divider
}));
} else if (isPanelConfig(config)) {
widget = this.createPanel(config);
} else {
widget = new 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(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(_extends({
name: 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(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 = _objectWithoutPropertiesLoose(config, _excluded2);
if (content) {
if (isPlainObject(content) && ! /*#__PURE__*/isValidElement(content)) {
Object.keys(content).forEach(function (key) {
if (/props$/i.test(key) && restConfig[key]) {
restConfig[key] = _extends({}, 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);
}, _extends({}, 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 = _applyDecoratedDescriptor(_class.prototype, "mainArea", [obx], {
configurable: true,
enumerable: true,
writable: true,
initializer: null
}), _applyDecoratedDescriptor(_class.prototype, "toggleFloatStatus", [action], Object.getOwnPropertyDescriptor(_class.prototype, "toggleFloatStatus"), _class.prototype), _class);