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

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

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

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

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

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

var _FmFragment = _interopRequireDefault(require("../core/FmFragment"));

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

var _DropPanel = _interopRequireDefault(require("absol-acomp/js/DropPanel"));

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

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

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


var _ = _FCore.default._;
var $ = _FCore.default.$;

function ComponentOutline() {
  _BaseEditor.default.call(this);

  this.$view = null;
  /**
   * @type {LayoutEditor}
   */

  this.layoutEditor = null;
  this.$focusNode = undefined;
  this._lastPressTime = 0;
  this.$nodesById = {};
  this.$pool = [];
  this._savedStatus = {};
  this._selectedIds = {};

  for (var key in this) {
    if (key.startsWith('ev_')) {
      this[key] = this[key].bind(this);
    }
  }
}

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

ComponentOutline.prototype.onAttached = function () {
  this.layoutEditor = this.getContext(_R.default.LAYOUT_EDITOR);
};

ComponentOutline.prototype.ev_contextNode = function (node, event) {
  var comp = this.layoutEditor.findComponentsById(node.compId)[0];
  var self = this;
  var items = [{
    icon: 'span.mdi.mdi-delete-variant',
    text: 'Delete',
    cmd: 'delete',
    extendStyle: {
      color: 'red'
    }
  }];
  var anchorEditor = this.layoutEditor.anchorEditorsCtrl.findAnchorEditorByComponent(comp);

  if (anchorEditor) {
    anchorEditor.focus();
    this.updateComponentStatus();
  } else {
    this.layoutEditor.setActiveComponent(comp);
  }

  if (this.layoutEditor.anchorEditors.length === 1) {
    items = [{
      icon: 'span.mdi.mdi-arrow-collapse-up',
      text: 'Move To Top',
      cmd: 'move-to-top'
    }, {
      icon: 'span.mdi.mdi-arrow-up',
      text: 'Move Up',
      cmd: 'move-up'
    }, {
      icon: 'span.mdi.mdi-arrow-down',
      text: 'Move Down',
      cmd: 'move-down'
    }, {
      icon: 'span.mdi.mdi-arrow-collapse-down',
      text: 'Move To Bottom',
      cmd: 'move-to-bottom'
    }, '================='].concat(items);
  }

  if (comp.isLayout) {
    items = [{
      icon: 'span.mdi.mdi-square-edit-outline',
      text: comp.isFragmentView ? "Edit Fragment" : 'Edit Layout',
      cmd: comp.isFragmentView ? 'edit_fragment' : 'edit_layout',
      extendStyle: {
        color: 'blue'
      }
    }, '=============='].concat(items);
  }

  event.stopPropagation();
  event.showContextMenu({
    items: items,
    extendStyle: {
      fontSize: '12px'
    }
  }, function (event) {
    switch (event.menuItem.cmd) {
      case "delete":
        self.layoutEditor.execCmd('delete');
        break;

      case 'move-to-top':
        self.moveToTop(comp);
        break;

      case 'move-up':
        self.moveUp(comp);
        break;

      case 'move-down':
        self.moveDown(comp);
        break;

      case 'move-to-bottom':
        self.moveToBottom(comp);
        break;

      case 'edit_layout':
        self.layoutEditor.editLayout(comp);
        break;

      case 'edit_fragment':
        var toast = _Toast.default.make({
          props: {
            htitle: "TODO",
            message: "Edit form"
          }
        });

        setTimeout(toast.disappear.bind(toast), 2000);
        break;
    }

    setTimeout(self.$view.focus.bind(self.$view), 20);
  });
};

ComponentOutline.prototype.moveToTop = function (comp) {
  this.layoutEditor.moveToTopComponent(comp);
};

ComponentOutline.prototype.moveUp = function (comp) {
  this.layoutEditor.moveUpComponent(comp);
};

ComponentOutline.prototype.moveDown = function (comp) {
  this.layoutEditor.moveDownComponent(comp);
};

ComponentOutline.prototype.moveToBottom = function (comp) {
  this.layoutEditor.moveToBottomComponent(comp);
  this.updateComponentTree();
};

ComponentOutline.prototype.updateComponentTree = function () {
  var self = this;
  var id, elt;

  for (id in this.$nodesById) {
    elt = this.$nodesById[id];
    elt.selfRemove();
    this.$pool.push(elt);
  }

  var savedStatus = this._savedStatus;
  var pool = this.$pool;
  this.$nodesById = {};

  function visit(expTree, comp) {
    var status = 'none';

    if (comp.children.length > 0) {
      status = savedStatus[comp.attributes.id] === 'close' ? 'close' : 'open';
      expTree.clearChild();
      comp.children.forEach(function (child) {
        var subTree = pool.pop() || self._makeNode();

        expTree.addChild(subTree);
        visit(subTree, child);
      });
    }

    expTree.status = status;
    expTree.name = comp.attributes.name || comp.attributes.id;
    expTree.icon = comp.menuIcon;
    expTree.compId = comp.attributes.id;
    self.$nodesById[expTree.compId] = expTree;
    expTree.removeClass('as-component-outline-node-selected');
    expTree.removeClass('as-component-outline-node-focus');
  }

  if (!this.layoutEditor.rootLayout) return;
  this.$expTree = this.$pool.pop() || self._makeNode();
  visit(this.$expTree, this.layoutEditor.rootLayout);

  if (this.$view) {
    this.$view.addChild(this.$expTree);
    this.$view.show = true;
  }

  this.updateComponentStatus();
};

ComponentOutline.prototype._makeNode = function () {
  var savedStatus = this._savedStatus;

  var node = _({
    tag: _ExpTree.default.tag,
    extendEvent: ['contextmenu'],
    on: {
      statuschange: function () {
        savedStatus[this.compId] = this.status;
      }
    }
  });

  node.on('press', this.ev_PressNode.bind(this, node)).on('contextmenu', this.ev_contextNode.bind(this, node));
  return node;
};

ComponentOutline.prototype.ev_PressNode = function (node, event) {
  var id = node.compId;
  var comp = this.layoutEditor.findComponentsById(id);
  if (!comp) return;
  comp = comp[0];
  var parentLayout = this.layoutEditor.findNearestLayoutParent(comp.parent);
  var newEditingLayout = parentLayout || this.layoutEditor.editingLayout;

  if (event.altKey) {
    if (comp.isLayout) {
      newEditingLayout = comp;
    }
  }

  if (newEditingLayout !== this.layoutEditor.editingLayout) {
    this.layoutEditor.editLayout(newEditingLayout);
    this.layoutEditor.anchorEditorsCtrl.setActiveComponent();
  }

  if (event.altKey) return;

  if (event.shiftKey) {
    this.layoutEditor.anchorEditorsCtrl.toggleActiveComponent(comp);
  } else {
    this.layoutEditor.setActiveComponent(comp);
  }
};

ComponentOutline.prototype.updateComponentStatus = function () {
  var newSelectedIds = this.layoutEditor.anchorEditors.reduce(function (ac, ae) {
    var id = ae.component.attributes.id;

    if (ae.isFocus) {
      ac[id] = 'focus';
    } else {
      ac[id] = true;
    }

    return ac;
  }.bind(this), {});
  var oldSelectedIds = this._selectedIds;
  Object.keys(Object.assign({}, oldSelectedIds, newSelectedIds)).forEach(function (id) {
    var node = this.$nodesById[id];
    if (!node) return;

    if (newSelectedIds[id]) {
      node.addClass('as-component-outline-node-selected');

      if (newSelectedIds[id] === 'focus') {
        node.addClass('as-component-outline-node-focus');
      } else {
        node.removeClass('as-component-outline-node-focus');
      }
    } else {
      node.removeClass('as-component-outline-node-selected');
      node.removeClass('as-component-outline-node-focus');
    }
  }.bind(this));
  this._selectedIds = newSelectedIds;
};

ComponentOutline.prototype.createView = function () {
  this.$view = _({
    tag: _DropPanel.default.tag,
    props: {
      name: 'Layout',
      show: true
    },
    class: ['as-component-outline'],
    attr: {
      tabindex: '1'
    },
    on: {
      keydown: this.ev_keydown.bind(this)
    }
  });
  this.$attachhook = _('attachhook');
  this.$view.appendChild(this.$attachhook);
  this.$attachhook.on('attached', function () {
    _ResizeSystem.default.add(this);

    this.requestUpdate();
  });

  this.$attachhook.requestUpdate = function () {
    this.$view.$body.addStyle('max-height', this.$view.parentElement.clientHeight - this.$view.$head.clientHeight + 'px');
  }.bind(this);

  if (this.$expTree) this.$view.addChild(this.$expTree);
};

ComponentOutline.prototype.ev_keydown = function (event) {
  return;
  var now = new Date().getTime();
  if (now - this._lastPressTime < 50) return;
  this._lastPressTime = now;

  switch (event.key) {
    case 'Down':
    case 'ArrowDown':
      if (this.$focusNode) this.selectNext(this.$focusNode.__comp__);
      break;

    case 'Up':
    case 'ArrowUp':
      if (this.$focusNode) this.selectPrev(this.$focusNode.__comp__);
      break;
  }

  this.layoutEditor.ev_cmdKeyDown(event);
  setTimeout(this.$view.focus.bind(this.$view), 10);
};

ComponentOutline.prototype.selectNext = function (component) {
  var prev = undefined;
  var self = this;
  $('exptree', this.$view, function (node) {
    if (node.__comp__ == component) {
      prev = node;
    } else if (prev) {
      self.layoutEditor.setActiveComponent(node.__comp__);
      node.$node.focus();
      return true;
    }
  });
};

ComponentOutline.prototype.selectPrev = function (component) {
  var prev = undefined;
  var self = this;
  $('exptree', this.$view, function (node) {
    if (node.__comp__ == component) {
      if (prev) {
        self.layoutEditor.setActiveComponent(prev.__comp__);
        prev.$node.focus();
        return true;
      }
    }

    prev = node;
  });
};

var _default = ComponentOutline;
exports.default = _default;