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/editor/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 _ = _FCore.default._;
var $ = _FCore.default.$;

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

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

  this.layoutEditor = null;
  this.activeComponents = [];
  this.$expNodes = [];
  this.$focusNode = undefined;
  this._lastPressTime = 0;
}

Object.defineProperties(ComponentOutline.prototype, Object.getOwnPropertyDescriptors(_BaseEditor.default.prototype));
ComponentOutline.prototype.constructor = ComponentOutline;

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

ComponentOutline.prototype.ev_contextNode = function (comp, event) {
  var self = this;
  var items = [{
    icon: 'span.mdi.mdi-delete-variant',
    text: 'Delete',
    cmd: 'delete',
    extendStyle: {
      color: 'red'
    }
  }];
  var anchorEditor = this.layoutEditor.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;
  this.$expNodes = [];

  if (this.$exptree) {
    this.$exptree.remove();
    this.$exptree = undefined;
  }

  function onPressNode(comp, event) {
    var target = event.target;
    var parentLayout = self.layoutEditor.findNearestLayoutParent(comp.parent);
    if (event.shiftKey && parentLayout === self.layoutEditor.editingLayout) self.layoutEditor.toggleActiveComponent(comp);else {
      if (parentLayout !== self.layoutEditor.editingLayout) {
        self.layoutEditor.editLayout(parentLayout || self.layoutEditor.rootLayout);
      }

      self.layoutEditor.setActiveComponent(comp);
    }
  }

  function visit(expTree, comp) {
    if (comp.children) {
      comp.children.forEach(function (childComp) {
        var childElt = _({
          tag: 'exptree',
          props: {
            icon: childComp.isFragmentView ? childComp.fragment.menuIcon : childComp.menuIcon,
            name: childComp.getAttribute('name'),
            __comp__: childComp
          }
        });

        childElt.getNode().defineEvent(['contextmenu']);
        childElt.on('press', onPressNode.bind(childElt, childComp));
        childElt.getNode().on({
          contextmenu: self.ev_contextNode.bind(self, childComp)
        });
        expTree.addChild(childElt);
        self.$expNodes.push(childElt);
        if (!childComp.isFragmentView) visit(childElt, childComp);
        expTree.status = 'open';
      });
    }
  }

  if (this.layoutEditor.rootLayout) {
    this.$exptree = _({
      tag: 'exptree',
      props: {
        status: 'open',
        icon: this.layoutEditor.rootLayout.menuIcon,
        name: this.layoutEditor.rootLayout.getAttribute('name'),
        __comp__: this.layoutEditor.rootLayout,
        __isRoot__: true
      }
    });
    this.$exptree.on('press', onPressNode.bind(this.$exptree, this.layoutEditor.rootLayout));
    this.$expNodes.push(this.$exptree);
    visit(this.$exptree, this.layoutEditor.rootLayout);

    if (this.$view) {
      this.$view.addChild(this.$exptree);
    }
  }

  this.updateComponentStatus();
};

ComponentOutline.prototype.updateComponentStatus = function () {
  this.$focusNode = undefined;
  var nodeElt;
  var editor;

  for (var i = 0; i < this.$expNodes.length; ++i) {
    nodeElt = this.$expNodes[i];
    editor = undefined;

    for (var j = 0; j < this.layoutEditor.anchorEditors.length; ++j) {
      if (this.layoutEditor.anchorEditors[j].component == nodeElt.__comp__) {
        editor = this.layoutEditor.anchorEditors[j];
      }
    }

    if (editor) {
      nodeElt.addClass('as-component-outline-node-selected');

      if (editor.isFocus) {
        nodeElt.addClass('as-component-outline-node-focus');
        this.$focusNode = nodeElt;
      } else {
        nodeElt.removeClass('as-component-outline-node-focus');
      }
    } else {
      nodeElt.removeClass('as-component-outline-node-selected');
      nodeElt.removeClass('as-component-outline-node-focus');
    }
  }
};

ComponentOutline.prototype.getView = function () {
  if (this.$view) return this.$view;
  this.$view = _({
    tag: 'bscroller',
    class: ['as-component-outline'],
    attr: {
      tabindex: '1'
    },
    on: {
      keydown: this.ev_keydown.bind(this)
    }
  });
  if (this.$exptree) this.$view.addChild(this.$exptree);
  return this.$view;
};

ComponentOutline.prototype.ev_keydown = function (event) {
  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;