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/layouteditor/ComponentPicker.js ***/
"use strict";

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

var _RelativeLayout = _interopRequireDefault(require("../layouts/RelativeLayout"));

var _DateInput = _interopRequireDefault(require("../components/DateInput"));

var _TextInput = _interopRequireDefault(require("../components/TextInput"));

var _TextArea = _interopRequireDefault(require("../components/TextArea"));

var _NumberInput = _interopRequireDefault(require("../components/NumberInput"));

var _ComboBox = _interopRequireDefault(require("../components/ComboBox"));

var _Radio = _interopRequireDefault(require("../components/Radio"));

var _Checkbox = _interopRequireDefault(require("../components/Checkbox"));

var _Label = _interopRequireDefault(require("../components/Label"));

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

var _Context = _interopRequireDefault(require("absol/src/AppPattern/Context"));

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

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

var _Draggable = _interopRequireDefault(require("absol-acomp/js/Draggable"));

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

var _PluginManager = _interopRequireDefault(require("../core/PluginManager"));

var _ComponentTreeList = _interopRequireDefault(require("../components/ComponentTreeList"));

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

var _FFloatWindow = _interopRequireDefault(require("../launcher/FFloatWindow"));

var _ShareConfiguration = _interopRequireDefault(require("absol/src/AppPattern/ShareConfiguration"));

var _BaseComponent = _interopRequireDefault(require("../core/BaseComponent"));

var _ExpTree = require("absol-acomp/js/ExpTree");


var _ = _FCore.default._;
var $ = _FCore.default.$;
/***
 * @augments EventEmitter
 * @augments FFloatWindow
 * @constructor
 */

function ComponentPicker() {
  _FFloatWindow.default.call(this);

  _EventEmitter.default.call(this);

  this.$view = null;
  /**
   * @type {import('./LayoutEditor').default}
   */

  this.layoutEditor = null;
}

_OOP.default.mixClass(ComponentPicker, _Context.default, _FFloatWindow.default);

ComponentPicker.prototype.windowTitle = "Toolbox";
ComponentPicker.prototype.config = new _ShareConfiguration.default({
  storageKey: 'FM_COMPONENT_PICKER'
});

ComponentPicker.prototype.bindWithEditor = function (editor) {
  this.layoutEditor = editor;
};

ComponentPicker.prototype.getView = function () {
  if (this.$view) return this.$view;
  var recentTagDict = (this.config.get('recent_component_tags') || []).reduce((ac, cr) => {
    ac[cr] = true;
    return ac;
  }, {});

  function toggleGroup() {
    this.status = {
      open: 'close',
      close: 'open'
    }[this.status];
  }
  /**
   *
   * @type {ExpTree}
   */


  this.$recent = _({
    tag: _ExpTree.ExpTree,
    props: {
      name: 'recent',
      status: 'open'
    }
  });

  var makeExp = node => {
    if (typeof node === 'object') {
      return {
        tag: 'exptree',
        props: {
          name: node.text,
          status: 'close'
        },
        on: {
          press: toggleGroup
        },
        child: node.children ? node.children.map(makeExp) : []
      };
    } else if (typeof node === 'function') {
      if (recentTagDict[node.prototype.tag]) {
        this.$recent.addChild(_({
          tag: 'exptree',
          props: {
            name: node.prototype.tag,
            icon: node.prototype.menuIcon,
            componentConstructor: node
          }
        }));
      }

      return {
        tag: 'exptree',
        props: {
          name: node.prototype.tag,
          icon: node.prototype.menuIcon,
          componentConstructor: node
        }
      };
    } else {
      console.error('Invalid node ', node);
    }
  };

  this.$all = _(makeExp(_ComponentTreeList.default));
  this.$view = _({
    class: ['as-component-picker', 'as-bscroller'],
    child: [this.$recent, this.$all]
  });
  this.$all.status = 'open';
  setTimeout(() => {
    var context = {
      self: this,
      toggleGroup: toggleGroup.bind(this.$all),
      $view: this.$view
    };

    _PluginManager.default.exec(this, _R.default.PLUGINS.COMPONENT_PICKER_VIEW, context);
  }, 100); //todo: find and call

  _({
    tag: 'hanger',
    elt: this.$view,
    on: {
      predrag: this.ev_constructorPreDrag.bind(this),
      dragstart: this.ev_constructorBeginDrag.bind(this),
      drag: this.ev_constructorDrag.bind(this),
      dragend: this.ev_constructorEndDrag.bind(this),
      dblclick: this.ev_dblClick.bind(this)
    }
  });

  return this.$view;
};

ComponentPicker.prototype._findComponentConstructor = function (elt) {
  while (elt) {
    if (elt.componentConstructor) return elt.componentConstructor;
    elt = elt.parentElement;
  }

  return null;
};

ComponentPicker.prototype.pushToRecent = function (constructor) {
  if (typeof constructor !== "function" || constructor.prototype.type !== _BaseComponent.default.prototype.type) {
    return;
  }

  var children = this.$recent.getChildren();
  var oldNode = children.find(child => child.componentConstructor === constructor);

  if (oldNode) {
    oldNode.selfRemove();
  } else {
    oldNode = _({
      tag: _ExpTree.ExpTree,
      props: {
        name: constructor.prototype.tag,
        icon: constructor.prototype.menuIcon,
        componentConstructor: constructor
      }
    });
  }

  this.$recent.addChildBefore(oldNode, this.$recent.getChildren()[0]);
  children = this.$recent.getChildren();

  while (children.length > 10) {
    children.pop().selfRemove();
  }

  var tags = children.map(children => children.componentConstructor.prototype.tag).filter(x => !!x);
  this.config.set('recent_component_tags', tags).save();
};

ComponentPicker.prototype.ev_dblClick = function (event) {
  if (!this.layoutEditor) return;

  var constructor = this._findComponentConstructor(event.target);

  if (!constructor) return;
  this.layoutEditor.layoutStructTool.addChildBySelected(constructor);
  this.pushToRecent(constructor);
};

ComponentPicker.prototype.ev_constructorPreDrag = function (event) {
  if (!this.layoutEditor || !this._findComponentConstructor(event.target)) {
    event.cancel();
  }
};

ComponentPicker.prototype.ev_constructorBeginDrag = function (event) {
  var constructor = this._findComponentConstructor(event.target);

  this._currentComponentConstructor = constructor;
  this.$modal = this.$modal || _('.as-component-picker-foreground');
  this.$higne = this.$higne || _('.as-component-picker-higne').addTo(this.$modal);
  this.$addBoxCtn = this.$addBoxCtn || _('.as-component-picker-add-box-container').addTo(this.$higne);
  this.$addBox = this.$addBox || _({
    class: 'as-component-picker-add-box',
    child: {
      class: 'as-component-picker-add-box-plus',
      child: 'span.mdi.mdi-plus'
    }
  }).addTo(this.$addBoxCtn);
  if (this.$addBoxIcon) this.$addBoxIcon.remove();
  this.$addBoxIcon = _(constructor.prototype && constructor.prototype.menuIcon || 'span.mdi.mdi-select-place').addTo(this.$addBox);
  this.$modal.addTo(document.body);

  if (this.layoutEditor.rootLayout) {
    this._dragRect = this.layoutEditor.rootLayout.domElt.getBoundingClientRect();
  } else {
    this._dragRect = undefined;
  }
};

ComponentPicker.prototype.ev_constructorEndDrag = function (event) {
  if (!this.$modal) return; //quick fix, must fix in Draggable

  this.$modal.remove();
  var constructor = this._currentComponentConstructor;
  var x = event.clientX;
  var y = event.clientY;
  var rect = this._dragRect;

  if (rect && rect.top <= y && rect.bottom >= y && rect.left <= x && rect.right >= x) {
    this.layoutEditor.addNewComponent(constructor, x - rect.left, y - rect.top);
  }

  this.pushToRecent(constructor);
};

ComponentPicker.prototype.ev_constructorDrag = function (event) {
  this.$addBoxCtn.addStyle({
    left: event.clientX + 'px',
    top: event.clientY + 'px'
  });
  var x = event.clientX;
  var y = event.clientY;
  var rect = this._dragRect;

  if (rect && rect.top <= y && rect.bottom >= y && rect.left <= x && rect.right >= x) {
    this.$addBox.addClass('as-can-drop');
  } else {
    this.$addBox.removeClass('as-can-drop');
  }
};

var _default = ComponentPicker;
exports.default = _default;