Server : Apache/2.4.41 (Ubuntu) System : Linux absol.cf 5.4.0-198-generic #218-Ubuntu SMP Fri Sep 27 20:18:53 UTC 2024 x86_64 User : www-data ( 33) PHP Version : 7.4.33 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare, Directory :  /var/www/html/libs/absol-full/dist/js/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

/*** module: node_modules/absol-form/js/fdeditor/FDEditor.js ***/
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.FDEPropertyDelegate = FDEPropertyDelegate;
exports.FDELayoutOutlineDelegate = FDELayoutOutlineDelegate;
exports.default = void 0;

var _BaseEditor = _interopRequireDefault(require("../core/BaseEditor"));

var _OOP = _interopRequireDefault(require("absol/src/HTML5/OOP"));

var _FCore = _interopRequireWildcard(require("../core/FCore"));

require("../../css/fdeditor.css");

var _FDText = _interopRequireDefault(require("./component/FDText"));

var _FDImage = _interopRequireDefault(require("./component/FDImage"));

var _FDHyperLayout = _interopRequireDefault(require("./component/FDHyperLayout"));

var _utils = require("./utils");

var _FDLabel = _interopRequireDefault(require("./component/FDLabel"));

var _FDDateInput = _interopRequireDefault(require("./component/FDDateInput"));

var _FDBreak = _interopRequireDefault(require("./component/FDBreak"));

var _R = _interopRequireDefault(require("./../R"));

var _FDSelectListText = _interopRequireDefault(require("./component/FDSelectListText"));

var _MultiObjectPropertyEditor = require("../propertyeditors/MultiObjectPropertyEditor");

var _IndexedPropertyNames = _interopRequireDefault(require("../core/IndexedPropertyNames"));

var _Assembler = require("../core/Assembler");

var _ResizeSystem = _interopRequireDefault(require("absol/src/HTML5/ResizeSystem"));

var _FDButton = _interopRequireDefault(require("./component/FDButton"));

var _FDCheckBox = _interopRequireDefault(require("./component/FDCheckBox"));

var _FDColorInput = _interopRequireDefault(require("./component/FDColorInput"));

var _FDCopyableIconTooltip = _interopRequireDefault(require("./component/FDCopyableIconTooltip"));

var _FDDateInYearInput = _interopRequireDefault(require("./component/FDDateInYearInput"));

var _Rectangle = _interopRequireDefault(require("absol/src/Math/Rectangle"));

var _FDHyperAnchorEditor = _interopRequireDefault(require("./anchoreditor/FDHyperAnchorEditor"));

var _FDDateNLevelInput = _interopRequireDefault(require("./FDDateNLevelInput"));

var _AElement = _interopRequireDefault(require("absol/src/HTML5/AElement"));

var _CMDTool = _interopRequireDefault(require("../fragment/CMDTool"));

var _CmdDescriptors = _interopRequireDefault(require("../cmds/CmdDescriptors"));

var _FDEditorCmd = _interopRequireWildcard(require("./FDEditorCmd"));

var _EventEmitter = _interopRequireDefault(require("absol/src/HTML5/EventEmitter"));

var _Snackbar = _interopRequireDefault(require("absol-acomp/js/Snackbar"));

var _Toast = _interopRequireDefault(require("absol-acomp/js/Toast"));

var _FDLinearLayout = _interopRequireDefault(require("./component/FDLinearLayout"));

var _FDChainLayout = _interopRequireDefault(require("./component/FDChainLayout"));

var _FDTextInput = _interopRequireDefault(require("./component/FDTextInput"));

var _FDComboBox = _interopRequireDefault(require("./component/FDComboBox"));

var _FDRelativeLayout = _interopRequireDefault(require("./component/FDRelativeLayout"));

var _FDRadio = _interopRequireDefault(require("./component/FDRadio"));

var _FDNumberInput = _interopRequireDefault(require("./component/FDNumberInput"));

var _FNode = require("../core/FNode");

var _FDTableInput = _interopRequireDefault(require("./component/FDTableInput"));

var _FDDateTimeInput = _interopRequireDefault(require("./component/FDDateTimeInput"));

var _FDMonthInput = _interopRequireDefault(require("./component/FDMonthInput"));

var _FDWeekInput = _interopRequireDefault(require("./component/FDWeekInput"));

var _FDMultiSelectListText = _interopRequireDefault(require("./component/FDMultiSelectListText"));

var _FDTimeRange24Input = _interopRequireDefault(require("./component/FDTimeRange24Input"));

var _FDDualSelectListText = _interopRequireDefault(require("./component/FDDualSelectListText"));

var _FDFileListInput = _interopRequireDefault(require("./component/FDFileListInput"));

var _FDTreeLeafComboBox = _interopRequireDefault(require("./component/FDTreeLeafComboBox"));

var _FDTextArea = _interopRequireDefault(require("./component/FDTextArea"));

var _FDGridLayout = _interopRequireDefault(require("./component/FDGridLayout"));

var _Constants = require("../Constants");

var _FOutline = require("../launcher/FOutline");

var _Fragment = _interopRequireDefault(require("absol/src/AppPattern/Fragment"));

var _stringGenerate = require("absol/src/String/stringGenerate");




/**
 * @extends BaseEditor
 * @constructor
 */
function FDEditor() {
  _BaseEditor.default.apply(this);

  this.CMDTool = new _CMDTool.default();
  this.cmdRunner.assign(_FDEditorCmd.default);
  this.lcEmitter = new _EventEmitter.default();
  this.outlineDelegate = new FDELayoutOutlineDelegate(this);
  this.assembler = new FDAssembler(this);
  this.rootFragment = null;
  this.rootLayout = null;
  this.selection = new FDSelection(this);
  this.selectCtrl = new FDESelectController(this);
  this.keyboardCtrl = new FDEKeyboardController(this);
  this.contentEditable = new FDContentEditable(this);
  this.propertyDelegate = new FDEPropertyDelegate(this, []);
  this.CMDTool.bindWithEditor(this);
  this.lcEmitter.on(_Constants.EV_COMP_TREE_CHANGE, () => {
    console.log(_Constants.EV_COMP_TREE_CHANGE);
  });
}

_OOP.default.mixClass(FDEditor, _BaseEditor.default);

FDEditor.prototype.createView = function () {
  this.$view = (0, _FCore._)({
    class: 'fde-editor',
    child: [{
      class: 'fde-editor-header',
      child: [this.CMDTool.getView()]
    }, {
      class: 'fde-editor-body',
      child: [{
        class: 'fde-viewport',
        child: {
          class: 'fde-space',
          child: [{
            class: 'fde-content',
            attr: {
              contenteditable: 'true',
              spellcheck: 'false'
            },
            on: {},
            child: []
          }, {
            class: 'fde-foreground'
          }]
        }
      }]
    }]
  });
  this.$content = (0, _FCore.$)('.fde-content', this.$view);
  this.contentEditable.onCreateView();
  this.$foreground = (0, _FCore.$)('.fde-foreground', this.$view);
  this.selection.onViewCreated();
  this.selectCtrl.onViewCreated();
  this.keyboardCtrl.onViewCreated();
};

FDEditor.prototype.setData = function (data) {
  if (this.rootLayout) {
    this.rootFragment.view.domElt.remove();
    this.rootFragment.destroy();
  }

  this.rootFragment = new FDEFragment(this, data);
  this.rootLayout = this.rootFragment.view;
  this.$content.addChild(this.rootLayout.domElt);
  this.rootFragment.start();
  this.propertyDelegate = new FDEPropertyDelegate(this, []);
  this.lcEmitter.emit(_Constants.EV_COMP_TREE_CHANGE);
};

FDEditor.prototype.getData = function () {
  if (this.rootLayout) {
    return this.rootLayout.getData();
  }

  return null;
};

FDEditor.prototype.onStart = function () {
  this.flexFormEditor = this.getContext(_R.default.FLEX_FORM_EDITOR);
  this.propertyEditor = this.getContext(_R.default.ALL_PROPERTY_EDITOR);
  this.CMDTool.start();
};

FDEditor.prototype.onResume = function () {
  if (this.error) return;

  try {
    var layoutEditor = this.getContext(_R.default.LAYOUT_EDITOR);
    var data = layoutEditor.getData();
    this.setData(data);
    this.selectCtrl.onResume();
    this.contentEditable.onResume();

    if (this.propertyEditor) {
      this.propertyEditor.delegate = this.propertyDelegate;
    }

    this.CMDTool.resume();
  } catch (e) {
    _Toast.default.make({
      props: {
        message: e.message,
        variant: 'error',
        htitle: 'Error'
      }
    });

    this.error = e;
    console.error(e);
  }
};

FDEditor.prototype.onPause = function () {
  if (this.error) return;
  /**
   *
   * @type {LayoutEditor}
   */

  var layoutEditor = this.getContext(_R.default.LAYOUT_EDITOR);
  var data = this.getData();

  if (layoutEditor) {
    layoutEditor.setData(data);
  }

  this.selectCtrl.onPause();
  this.contentEditable.onPause();
  this.CMDTool.pause();
};

FDEditor.prototype.notifySizeChange = function () {
  console.log(this);
};

FDEditor.prototype.getCmdGroupTree = function () {
  return [['preview', 'remotePreview'], ['save', 'saveAs', 'saveAsSystem', 'export2Json', 'export2sharpEncode', 'export2clipboard'], ['importFromJson'], ['pageSetting'], ['formatTextAlignLeft', 'formatTextAlignCenter', 'formatTextAlignRight'], ['formatTextBold', 'formatTextItalic', 'formatTextUnderline']];
};

FDEditor.prototype.getCmdDescriptor = function (name) {
  var descriptor = _FDEditorCmd.FDEditorCmdDescriptors[name];

  if (typeof descriptor === "function") {
    descriptor = descriptor.call(this);
  }

  return Object.assign({
    text: name,
    icon: 'span.mdi.mdi-command'
  }, _CmdDescriptors.default[name], descriptor);
};

var _default = FDEditor;
/**
 *
 * @param {FDEditor} editor
 * @constructor
 */

exports.default = _default;

function FDAssembler(editor) {
  /**
   *
   * @type {FDEditor}
   */
  this.editor = editor;
  this.classes = {};
  this.addClass(_FDGridLayout.default, _FDRelativeLayout.default, _FDLinearLayout.default, _FDChainLayout.default, _FDText.default, _FDImage.default, _FDHyperLayout.default, _FDLabel.default, _FDBreak.default, _FDSelectListText.default, _FDDateInput.default, _FDButton.default, _FDCheckBox.default, _FDRadio.default, _FDNumberInput.default, _FDColorInput.default, _FDCopyableIconTooltip.default, _FDDateInYearInput.default, _FDDateNLevelInput.default, _FDTextInput.default, _FDComboBox.default, _FDTableInput.default, _FDDateTimeInput.default, _FDMonthInput.default, _FDWeekInput.default, _FDMultiSelectListText.default, _FDTimeRange24Input.default, _FDDualSelectListText.default, _FDFileListInput.default, _FDTreeLeafComboBox.default, _FDTextArea.default);
}

FDAssembler.prototype.addClass = function (...constructors) {
  constructors.forEach(constructor => {
    this.classes[constructor.prototype.tag] = constructor;
  });
};
/**
 *
 * @param data
 * @param frag
 * @returns {*}
 */


FDAssembler.prototype.build = function (data, frag) {
  if (data.class) return this.buildFragment(data, frag);
  if (data.tag) return this.buildComponent(data, frag);
};

FDAssembler.prototype.buildComponent = function (data, frag) {
  var clazz = this.classes[data.tag];
  if (!clazz) throw new Error("Not handle " + data.tag);
  var comp = new clazz(this.editor);
  comp.fragment = frag;
  Object.assign(comp.attributes, data.attributes || {});
  Object.assign(comp.style, data.style || {});

  if (data.children) {
    data.children.forEach(it => {
      var c = this.build(it, frag);

      if (!c) {
        throw {
          message: 'Can not build data',
          data: it
        };
      }

      if (c.type === 'FRAGMENT') {
        comp.addChild(c.view);
      } else if (c.type === 'COMPONENT') {
        comp.addChild(c);
      }
    });
  }

  return comp;
};

FDAssembler.prototype.buildFragment = function (data, parentFrag) {
  /**
   * @extends FDEFragment
   * @constructor
   */
  function SubFragment(editor) {
    FDEFragment.call(this, editor, {
      tag: 'HyperLayout',
      style: data.style || {},
      attributes: data.attributes || {},
      children: [{
        tag: 'Text',
        style: {
          textColor: 'rgb(200, 0, 0)'
        },
        attributes: {
          text: "Form [" + data.class + ']'
        }
      }]
    });
  }

  _OOP.default.mixClass(SubFragment, FDEFragment);

  SubFragment.prototype.tag = data.class;
  return new SubFragment(this.editor);
};
/**
 * @extends Fragment
 * @param {FDEditor} editor
 * @param contentViewData
 * @constructor
 */


function FDEFragment(editor, contentViewData) {
  _Fragment.default.call(this);

  this.editor = editor;
  this.view = this.editor.assembler.build(contentViewData, this);
}

_OOP.default.mixClass(FDEFragment, _Fragment.default);

FDEFragment.prototype.type = 'FRAGMENT';

FDEFragment.prototype.destroy = function () {};

FDEFragment.prototype.onStart = function () {
  (0, _FNode.traversal)(this.view, path => {
    path.node.updateViewStyle();
  });
};
/**
 *
 * @param {FDSelection} selection
 * @constructor
 */


function FDRange(selection) {
  this.selection = selection;
  /**
   *
   * @type {FDBaseComponent}
   */

  this.startContainer = null;
  /**
   *
   * @type {"start"|number|"end"}
   */

  this.startOffset = 0;
  /**
   *
   * @type {FDBaseComponent}
   */

  this.endContainer = null;
  /**
   *
   * @type {"start"|number|"end"}
   */

  this.endOffset = 0;
  this.leafComponents = [];
  this.ancestorComponent = null;
}

FDRange.prototype.pool = [];

FDRange.prototype.getBoundingClientRect = function () {
  return null;
};
/**
 *
 * @param {FDBaseComponent}container
 * @param {number} offset
 */


FDRange.prototype.setStart = function (container, offset) {
  this.startContainer = container;
  this.startOffset = offset;

  if (!this.endContainer) {
    this.endContainer = container;
    this.endOffset = offset;
  }

  return this;
};
/**
 *
 * @param {FDBaseComponent}container
 * @param {number} offset
 */


FDRange.prototype.setEnd = function (container, offset) {
  this.endContainer = container;
  this.endOffset = offset;
  return this;
};
/**
 *
 * @param {Range} range
 */


FDRange.prototype.fromDomRange = function (range) {
  var offsetOf = (comp, ctn, ofs) => {
    return comp.offsetFromDom(ctn, ofs);
  };

  var startContainer = (0, _utils.findFDComponentOfNode)(range.startContainer);
  var startOffset = offsetOf(startContainer, range.startContainer, range.startOffset);
  var endContainer = (0, _utils.findFDComponentOfNode)(range.endContainer);
  var endOffset = offsetOf(endContainer, range.endContainer, range.endOffset);
  this.setStart(startContainer, startOffset).setEnd(endContainer, endOffset).commit();
  return this;
};

FDRange.prototype.commit = function () {
  var startCtn = this.startContainer;
  var endCtn = this.endContainer;

  var findStack = comp => {
    var res = [];

    while (comp) {
      res.unshift(comp);
      comp = comp.parent;
    }

    return res;
  };

  var sStack = findStack(startCtn);
  var eStack = findStack(endCtn);
  var from;

  while (eStack[0] === sStack[0] && eStack.length > 0 && sStack.length > 0) {
    from = eStack.shift();
    sStack.shift();
  }

  var leafNodes = [];
  var started = false;
  var ended = false;

  var visit = comp => {
    if (ended) return;

    if (comp === startCtn) {
      started = true;
    }

    if (started && (!comp.children || comp.children.length === 0)) {
      leafNodes.push(comp);
    }

    if (comp.children) comp.children.forEach(child => visit(child));
    if (comp === endCtn) ended = true;
  };

  visit(from);
  this.ancestorComponent = from;
  this.leafComponents = leafNodes;
  return this;
};

Object.defineProperty(FDRange.prototype, 'collapsed', {
  get: function () {
    return this.startOffset === this.endOffset && this.startContainer === this.endContainer;
  }
});
/**
 *
 * @param {FDEditor} editor
 * @constructor
 */

function FDSelection(editor) {
  this.fdEditor = editor;
  /**
   *
   * @type {null|FDRange}
   */

  this.range = null;
  this.$textRanges = [];
  this.anchorEditors = {}; //by objId

  this.$virtualCaret = (0, _FCore._)('.fde-virtual-caret');
}

FDSelection.prototype.onViewCreated = function () {
  this.$foreground = this.fdEditor.$foreground;
};

FDSelection.prototype.$textRangePool = [];

FDSelection.prototype.importFromDomRange = function (domRange) {
  this.range = new FDRange(this);
  this.range.fromDomRange(domRange);
  this.draw();
};

FDSelection.prototype.draw = function () {
  var wait2Pool = this.$textRanges;
  this.$textRanges = [];

  var fBound = _Rectangle.default.fromClientRect(this.$foreground.getBoundingClientRect());

  var wait2destroy = this.anchorEditors;
  this.anchorEditors = {};
  var domRange, drBound;
  var anchorEditor, comp;

  if (this.range) {
    if (this.range.collapsed) {
      if (!this.$virtualCaret.parentElement) this.$foreground.addChild(this.$virtualCaret);
      drBound = this.range.startContainer.getTextRects(this.range.startOffset)[0];
      this.$virtualCaret.addStyle({
        left: drBound.x - fBound.x + 'px',
        top: drBound.y - fBound.y + 'px',
        height: drBound.height + 'px'
      });

      if (!this.range.startContainer.isText) {
        comp = this.range.startContainer;

        if (wait2destroy[comp.objId]) {
          anchorEditor = wait2destroy[comp.objId];
          anchorEditor.updatePosition();
          delete wait2destroy[comp.objId];
        } else {
          anchorEditor = new _FDHyperAnchorEditor.default(this.fdEditor, comp);
        }

        this.anchorEditors[comp.objId] = anchorEditor;
      }
    } else {
      if (this.$virtualCaret.parentElement) this.$virtualCaret.remove();
      this.range.leafComponents.forEach(comp => {
        var rangeElt, startOffset, endOffset;
        var bounds;
        var anchorEditor;

        if (comp.isText) {
          if (comp === this.range.endContainer) {
            endOffset = this.range.endOffset;
          } else {
            endOffset = Infinity;
          }

          if (comp === this.range.startContainer) {
            startOffset = this.range.startOffset;
          } else startOffset = 0;

          bounds = comp.getTextRects(startOffset, endOffset);
          bounds.forEach(it => {
            rangeElt = wait2Pool.pop() || (0, _FCore._)('.fde-virtual-selected-range').addTo(this.$foreground);
            this.$textRanges.push(rangeElt);
            var bound = it.rect || it;
            rangeElt.addStyle({
              width: bound.width + 'px',
              height: bound.height + 'px',
              left: bound.x - fBound.x + 'px',
              top: bound.y - fBound.y + 'px'
            });
          });
        } else {
          if (wait2destroy[comp.objId]) {
            anchorEditor = wait2destroy[comp.objId];
            anchorEditor.updatePosition();
            delete wait2destroy[comp.objId];
          } else {
            anchorEditor = new _FDHyperAnchorEditor.default(this.fdEditor, comp);
          }

          this.anchorEditors[comp.objId] = anchorEditor;
        }
      });
    }
  }

  wait2Pool.forEach(elt => {
    elt.remove();
    this.$textRangePool.push(wait2Pool);
  });

  for (var objId in wait2destroy) {
    wait2destroy[objId].destroy();
  }
};
/**
 *
 * @param {FDEditor} editor
 * @constructor
 */


function FDESelectController(editor) {
  this.editor = editor;
  this.ev_selectionChange = this.ev_selectionChange.bind(this);
  this.ev_click = this.ev_click.bind(this);
  this.$virtualCaret = (0, _FCore._)('.fde-virtual-caret');
  this.anchorEditors = [];
  this.scTO = -1;
}

FDESelectController.prototype.$rangePool = [];

FDESelectController.prototype.onViewCreated = function () {
  this.$content = this.editor.$content;
  this.$foreground = this.editor.$foreground;
  this.$virtualCaret.addTo(this.$foreground);
  this.$content.on('click', this.ev_click).on('blur', this.ev_blur.bind(this)).on('focus', this.ev_focus.bind(this));
};

FDESelectController.prototype.onResume = function () {// document.addEventListener('selectionchange', this.ev_selectionChange);
};

FDESelectController.prototype.onPause = function () {// document.removeEventListener('selectionchange', this.ev_selectionChange)
};

FDESelectController.prototype.ev_selectionChange = function (event) {
  var contentEditable = this.editor.contentEditable;
  var isIn = contentEditable.isFocusIn;
  if (!isIn) return;
  var range = contentEditable.range;

  var dispatchSingleEvent = (elt, eventData) => {
    while (elt) {
      if (elt.isSupportedEvent && elt.isSupportedEvent(eventData.type)) {
        elt.emit(eventData.type, eventData, elt);
      }

      elt = elt.parentElement;
      if (elt === this.$content) break;
    }
  };

  var dispatchMultiEvent = (elt0, elt1, eventData, op0, op1, op01) => {
    var arr0 = [];
    var arr1 = [];

    while (elt0) {
      if (elt0.isSupportedEvent && elt0.isSupportedEvent(eventData.type)) {
        arr0.unshift(elt0);
      }

      elt0 = elt0.parentElement;
      if (elt0 === this.$content) break;
    }

    while (elt1) {
      if (elt1.isSupportedEvent && elt1.isSupportedEvent(eventData.type)) {
        arr1.unshift(elt1);
      }

      elt1 = elt1.parentElement;
      if (elt1 === this.$content) break;
    }

    var c;

    while (arr0.length > arr1.length) {
      c = arr0.pop();
      c.emit(eventData.type, Object.assign(eventData, op0), c);
    }

    while (arr1.length > arr0.length) {
      c = arr1.pop();
      c.emit(eventData.type, Object.assign(eventData, op1), c);
    }

    var c0, c1;

    while (arr0.length > 0) {
      c0 = arr0.pop();
      c1 = arr1.pop();

      if (c0 === c1) {
        c0.emit(eventData.type, Object.assign(eventData, op01), c0);
      } else {
        c0.emit(eventData.type, Object.assign(eventData, op0), c0);
        c1.emit(eventData.type, Object.assign(eventData, op1), c0);
      }
    }
  };

  var newRange;
  var eventData;

  if (range.collapsed) {
    if (_AElement.default.prototype.isDescendantOf.call(range.startContainer, this.$content)) {
      eventData = {
        type: 'range',
        range: range,
        target: range.startContainer,
        comp: (0, _utils.findFDComponentOfNode)(range.startContainer),
        pos: 'in'
      };
      dispatchSingleEvent(range.startContainer, eventData);
    }
  } else {
    if (range.startContainer !== range.endContainer) {
      newRange = document.createRange();
      newRange.setStart(range.startContainer, range.endOffset);

      if (range.startContainer.nodeType === Node.TEXT_NODE) {
        newRange.setEnd(range.startContainer, range.startContainer.data.length);
      } else {
        newRange.setEnd(range.startContainer, range.startOffset);
      }

      sel.removeAllRanges();
      sel.addRange(newRange);

      _Snackbar.default.show("TODO: Select range");
    } // this.showVirtualRangeByRange(range);

  }

  clearTimeout(this.selectTO);
  this.selectTO = setTimeout(() => {
    var sel = getSelection();
    var range = sel.getRangeAt(0);
    this.editor.selection.importFromDomRange(range);
    this.editor.notifyCmdDescriptorsChange();
    this.changeComponentDelegateIfNeed();
  }, 5);
};

FDESelectController.prototype.ev_click = function (event) {
  var comp = (0, _utils.findFDComponentOfNode)(event.target);
  if (comp) comp.onClick(event);
};

FDESelectController.prototype.ev_focus = function (event) {
  this.$foreground.addClass('fd-focus');
};

FDESelectController.prototype.ev_blur = function () {
  this.$foreground.removeClass('fd-focus');
};

FDESelectController.prototype.changeComponentDelegateIfNeed = function () {
  var oldComponents = this.editor.propertyDelegate ? this.editor.propertyDelegate.components : [];
  var newComponents = this.editor.selection.range && this.editor.selection.range.leafComponents;
  newComponents = newComponents || [];
  var newIndexDict = newComponents.reduce((ac, cr, i) => {
    ac[cr.objId] = i;
    return ac;
  }, {});
  var oldIndexDict = oldComponents.reduce((ac, cr, i) => {
    ac[cr.objId] = i;
    return ac;
  }, {});
  var newAEs = [];
  var isDiff = newComponents.length !== oldComponents.length;
  isDiff = isDiff || newComponents.some(x => !(x.objId in oldIndexDict)); // var

  if (isDiff) {
    this.editor.propertyDelegate = new FDEPropertyDelegate(this.editor, newComponents);

    if (this.editor.propertyEditor) {
      this.editor.propertyEditor.delegate = this.editor.propertyDelegate;
    }
  } // else {
  //     console.log('no change')
  // }

};
/**
 *
 * @param {FDEditor} editor
 * @constructor
 */


function FDContentEditable(editor) {
  this.editor = editor;
  this.focusingDict = {};
  this.focusingArr = [];
  this.inRangeDict = {};
  this.inRangeArr = [];
  this.range = null;
  this.isFocusIn = false;
}

FDContentEditable.prototype.onCreateView = function () {
  this.$content = this.editor.$content;
  this.$content.on('focus', this.ev_focus.bind(this));
  this.ev_selectionChange = this.ev_selectionChange.bind(this);
};
/**
 *
 * @param {*=} elt
 */


FDContentEditable.prototype.setupElt = function (elt) {
  elt = elt || this.$content;

  if (elt !== this.$content && !elt.fdAttached && elt.nodeType !== Node.TEXT_NODE) {
    elt.fdAttached = true;
    elt.fdId = (0, _stringGenerate.randomIdent)(10);
    (0, _FCore.$)(elt).defineEvent(['fdselectfocus', 'fdselectblur', 'fdrange', "fdrangeblur", 'fdkeyup', 'fdeydown']);
  }

  Array.prototype.forEach.call(elt.childNodes, child => this.setupElt(child));
};

FDContentEditable.prototype.onResume = function () {
  document.addEventListener('selectionchange', this.ev_selectionChange);
};

FDContentEditable.prototype.onPause = function () {
  document.removeEventListener('selectionchange', this.ev_selectionChange);
};

FDContentEditable.prototype.ev_focus = function (event) {// console.log(event);
};

FDContentEditable.prototype.onSel = function (sel) {
  var focusNode = sel.focusNode;
  var newFocusingDict = {};
  var newFocusingArray = [];
  var isIn = false;
  var target = focusNode;

  while (target && target !== this.$content && target !== document.body) {
    if (target.fdAttached && target.emit) {
      newFocusingArray.push(target);
      newFocusingDict[target.fdId] = target;
    }

    target = target.parentElement;

    if (target === this.$content) {
      isIn = true;
    }
  }

  this.focusingArr.forEach(elt => {
    if (elt.isDescendantOf(this.$content)) {
      if (!newFocusingDict[elt.fdId]) {
        elt.emit('fdselectblur', {
          focusNode: focusNode,
          inContent: isIn
        }, elt);
      }
    }
  });
  newFocusingArray.forEach(elt => {
    if (!this.focusingDict[elt.fdId]) {
      elt.emit('fdselectfocus', {
        focusNode: focusNode,
        inContent: isIn
      }, elt);
    }
  });

  if (isIn) {
    this.focusingDict = newFocusingDict;
    this.focusingArr = newFocusingArray;
    this.isFocusIn = true;
    this.editor.$view.addClass('as-content-selected');
  } else {
    this.isFocusIn = false;
    this.editor.$view.removeClass('as-content-selected');
  }
};
/**
 *
 * @param {Range} range
 */


FDContentEditable.prototype.onRange = function (range) {
  var startCtn = range.startContainer;
  var endCtn = range.endContainer;
  var startOfs = range.startOffset;
  var endOfs = range.endOffset;
  var started = false;
  var ended = false;
  var newInRangeDict = {};
  var newInRangeArray = [];

  var visit = node => {
    var prevStart = started;
    var prevEnd = ended;

    if (startCtn === node && endCtn === node) {
      started = true;

      if (node.nodeType !== Node.TEXT_NODE) {
        Array.prototype.slice.call(node.childNodes, startOfs, endOfs).forEach(child => visit(child));
      }

      ended = true;
    } else if (startCtn === node) {
      started = true;

      if (node.nodeType !== Node.TEXT_NODE) {
        Array.prototype.slice.call(node.childNodes, startOfs).forEach(child => visit(child));
      }
    } else if (endCtn === node) {
      if (node.nodeType !== Node.TEXT_NODE) {
        Array.prototype.slice.call(node.childNodes, 0, endOfs).forEach(child => visit(child));
      }

      ended = true;
    } else if (node.nodeType !== Node.TEXT_NODE) {
      Array.prototype.slice.call(node.childNodes).forEach(child => visit(child));
    }

    var newStart = started;
    var newEnd = ended;
    var position;

    if (prevStart) {
      if (!prevEnd) {
        if (newEnd) {
          position = 'contain-end';
        } else {
          position = 'in';
        }
      }
    } else {
      if (newStart) {
        if (newEnd) {
          position = 'contain-all';
        } else {
          position = 'contain-start';
        }
      }
    }

    if (node.emit) {
      if (position) {
        node.emit('fdrange', {
          type: 'fdrange',
          position: position,
          range: range
        }, node);
        newInRangeDict[node.fdId] = {
          node: node,
          position: position
        };
        newInRangeArray.push(newInRangeDict[node.fdId]);
      } else if (this.inRangeDict[node.fdId]) {
        node.emit('fdrange', {
          type: 'fdrange',
          position: 'out',
          range: range
        }, node);
      }
    }
  };

  Array.prototype.forEach.call(this.$content.childNodes, child => visit(child));
  this.inRangeDict = newInRangeDict;
  this.inRangeArr = newInRangeArray;
};

FDContentEditable.prototype.ev_selectionChange = function () {
  var sel = document.getSelection();
  this.setupElt();
  this.onSel(sel);

  if (this.isFocusIn) {
    this.range = sel.getRangeAt(0);
    this.onRange(this.range);
  } else {
    this.inRangeArr.forEach(it => it.node.emit('fdrangeblur', {
      type: 'dfrangeblur'
    }, it.node));
  }

  this.editor.selectCtrl.ev_selectionChange();
};

FDContentEditable.prototype.destroy = function () {
  document.removeEventListener('range', this.ev_selectionChange);
};
/**
 *
 * @param {FDEditor} editor
 * @constructor
 */


function FDEKeyboardController(editor) {
  this.editor = editor;
  Object.keys(this.constructor.prototype).forEach(key => {
    if (key.startsWith('ev_')) this[key] = this[key].bind(this);
  });
}

FDEKeyboardController.prototype.onViewCreated = function () {
  this.$content = this.editor.$content;
  this.$content.on('keydown', this.ev_keyDown);
};

FDEKeyboardController.prototype.ev_keyDown = function (event) {
  var range = getSelection().getRangeAt(0);

  var dispatchSingleEvent = (elt, eventData) => {
    while (elt) {
      if (elt.isSupportedEvent && elt.isSupportedEvent(eventData.type)) {
        elt.emit(eventData.type, eventData, elt);
      }

      elt = elt.parentElement;
      if (elt === this.$content) break;
    }
  };

  var comp;

  if (range) {
    if (range.collapsed) {
      dispatchSingleEvent(range.startContainer, event);
      comp = (0, _utils.findFDComponentOfNode)(range.startContainer);

      if (comp) {
        comp.onKeyDown(event);
      }
    } else {
      if (range.startContainer !== range.endContainer && range.startContainer.nodeType !== Node.TEXT_NODE) {
        event.preventDefault();
      }
    }
  }

  setTimeout(() => {
    this.editor.selectCtrl.ev_selectionChange();
    this.editor.propertyDelegate.updatePropertyRecursive('text');
    this.editor.propertyDelegate.updatePropertyRecursive('value');
  }, 10);
};
/***
 * @extends MultiObjectPropertyDelegate
 * @param {FDEditor} editor
 * @param {Array<BaseComponent>} components
 * @constructor
 */


function FDEPropertyDelegate(editor, components) {
  this.editor = editor;
  this.components = components;

  _MultiObjectPropertyEditor.MultiObjectPropertyDelegate.call(this);
}

_OOP.default.mixClass(FDEPropertyDelegate, _MultiObjectPropertyEditor.MultiObjectPropertyDelegate);

FDEPropertyDelegate.prototype.getPropertyNames = function () {
  if (this.components.length === 0) return [];
  var descriptors = {};
  var hasDependency = {};
  this.components.forEach(comp => {
    if (comp.fragment !== this.editor.rootFragment) {
      descriptors['class'] = [{
        type: 'enum',
        values: [comp.fragment.tag] //

      }];
    }

    Object.keys(comp.attributeHandlers).forEach(name => {
      if (comp.fragment !== this.editor.rootFragment) {
        if (!['id', 'name'].includes(name)) return;
      }

      var desc = comp.attributes.getPropertyDescriptor(name);
      if (desc.dependency && desc.dependency.length > 0) hasDependency[name] = true;
      descriptors[name] = descriptors[name] || [];
      descriptors[name].push(desc);
    });
    Object.keys(Object.assign({}, comp.styleHandlers, comp.anchor && comp.anchor.styleHandlers)).forEach(name => {
      var desc = comp.style.getPropertyDescriptor(name);
      if (desc.dependency && desc.dependency.length > 0) hasDependency[name] = true;
      descriptors[name] = descriptors[name] || [];
      descriptors[name].push(desc);
    });
  });

  var checkOKDescArr = arr => {
    if (arr.length !== this.components.length) return false;
    if (arr.length === 1) return true;
    var first = arr[0];
    return arr.every(it => it.sign && it.sign === first.sign);
  };

  var names = Object.keys(descriptors).filter(key => (!hasDependency[key] || this.components.length === 1) && checkOKDescArr(descriptors[key]));
  names.sort((a, b) => {
    var vA = _IndexedPropertyNames.default[a] + 1 || 10000;
    var vB = _IndexedPropertyNames.default[b] + 1 || 10000;

    if (vA === vB) {
      if (a < b) vB += 1;else vA += 1;
    }

    return vA - vB;
  });
  return names;
};

FDEPropertyDelegate.prototype.getAllTagsByTypeId = function (typeId) {
  var res = Object.keys(_Assembler.AssemblerInstance.classes['FRAGMENT']).map(formId => {
    var clazz = _Assembler.AssemblerInstance.classes['FRAGMENT'][formId];
    var cvd = clazz.prototype.contentViewData;
    var layout = cvd.layout || cvd;
    var id = layout.attributes && layout.attributes.typeId;
    if (id === typeId) return formId;
    return null;
  }).filter(x => x !== null);
  return res;
};

FDEPropertyDelegate.prototype.getPropertyDescriptor = function (key, ...args) {
  if (key === 'class') return {
    type: 'enum',
    values: this.getAllTagsByTypeId(this.components[0].fragment.contentViewData.layout.attributes && this.components[0].fragment.contentViewData.layout.attributes.typeId) //

  };
  var obj = this.components[this.components.length - 1];
  var disabled = ['name', 'disembark', 'dataBinding', 'value', 'values', 'list', 'treeList', 'disabled', 'text', 'checked', 'textType'].indexOf(key) >= 0 && this.components.some(function (obj) {
    return obj.attributes && obj.attributes.permissions && obj.attributes.permissions.edit_attributes === 'GENERATOR';
  });
  var res = obj.attributeHandlers[key] ? obj.attributes.getPropertyDescriptor(key) : obj.style.getPropertyDescriptor(key);
  res = Object.assign({}, res);
  res.disabled = res.disabled || disabled;
  return res;
};

FDEPropertyDelegate.prototype.getProperty = function (key, ...args) {
  var _obj$attributes, _obj$style;

  var obj = this.components[this.components.length - 1];

  if (key === 'class') {
    return this.components[0].fragment.contentViewData.layout.attributes && this.components[0].fragment.contentViewData.layout.attributes.typeId;
  }

  return obj.attributeHandlers[key] ? (_obj$attributes = obj.attributes).getProperty.apply(_obj$attributes, [key].concat(args)) : (_obj$style = obj.style).getProperty.apply(_obj$style, [key].concat(args));
};

FDEPropertyDelegate.prototype.mesureKeys = ['left', 'right', 'top', 'bottom', 'width', 'height', /^padding/, /^margin/];

FDEPropertyDelegate.prototype.setProperty = function (key, value, ...args) {
  var isMeasure;

  switch (key) {
    case 'class':
      this.components.forEach(obj => {
        var style = obj.style.export();
        var attributes = {
          id: obj.attributes.id,
          name: obj.attributes.name
        };

        if (obj.attributes.permissions) {
          attributes.permissions = obj.attributes.permissions;
        }

        var newFrag = _Assembler.AssemblerInstance.build({
          class: value,
          style: style,
          attributes: attributes
        });

        obj.parent.addChildBefore(newFrag.view, obj);
        obj.fragment.parent.addChildBefore(newFrag, obj.fragment);
        obj.parent.removeChild(obj);
        obj.fragment.parent.removeChild(newFrag);
      }); // this.editor.anchorEditorsCtrl.setActiveComponent();

      _ResizeSystem.default.update();

      break;

    case 'position':
      this.components.forEach(obj => {
        if (obj.style.position === 'absolute' && (value === 'relative' || value === 'static') || obj.style.position === 'relative' && value === 'static') {
          obj.style.left = 0;
          obj.style.top = 0;
          obj.style.bottom = 0;
          obj.style.right = 0;
        }

        obj.style.position = value;
      }); // this.editor.anchorEditorsCtrl.updateAnchorEditors();

      break;

    default:
      this.components.forEach(obj => {
        var _obj$attributes2, _obj$style2;

        return obj.attributeHandlers[key] ? (_obj$attributes2 = obj.attributes).setProperty.apply(_obj$attributes2, [key, value].concat(args)) : (_obj$style2 = obj.style).setProperty.apply(_obj$style2, [key, value].concat(args));
      });
      isMeasure = this.mesureKeys.some(t => key === t || t.test && t.test(key));

      if (isMeasure) {// this.editor.anchorEditorsCtrl.updateAnchorEditorPositions();
      } else if (key.toLowerCase().indexOf('align')) {// this.editor.anchorEditorsCtrl.updateAnchorEditors();
      }

  }

  Object.values(this.editor.selection.anchorEditors).forEach(ae => ae.updatePosition()); //todo: update cursor
};

FDEPropertyDelegate.prototype.onSetPropertyComplete = function (name) {};
/***
 * @extends OutlineDelegate
 * @param {FDEditor} editor
 * @constructor
 */


function FDELayoutOutlineDelegate(editor) {
  _FOutline.OutlineDelegate.call(this);

  this.editor = editor;
}

_OOP.default.mixClass(FDELayoutOutlineDelegate, _FOutline.OutlineDelegate);

FDELayoutOutlineDelegate.prototype.getTreeData = function () {
  var layout = this.editor.rootLayout;
  if (!layout) return [];
  var frag = layout.fragment;

  var visit = compNode => {
    var dataNode = {
      name: compNode.attributes.displayName || compNode.attributes.name,
      id: compNode.attributes.id,
      icon: compNode.fragment === frag ? compNode.menuIcon : compNode.fragment.menuIcon
    };

    if (compNode.fragment === frag && compNode.children && compNode.children.length > 0) {
      dataNode.children = compNode.children.map(c => visit(c));
    }

    return dataNode;
  };

  return visit(layout);
};

FDELayoutOutlineDelegate.prototype.onClickNode = function (nodeELt, event) {
  console.log(nodeELt);
};