@alilc/lowcode-editor-skeleton/es/skeleton.js

alibaba lowcode editor skeleton

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);