.

VaKeR CYBER ARMY
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 File : /var/www/html/libs/absol-full/dist/js/mdls__absol-form__js__anchoreditors__LinearAnchorEditor.js
/*** module: node_modules/absol-form/js/anchoreditors/LinearAnchorEditor.js ***/
"use strict";

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

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

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

require("../dom/Icons");

var _BaseAnchorEditor = _interopRequireDefault(require("../core/BaseAnchorEditor"));

var _LinearAnchorEditorCmd = _interopRequireWildcard(require("../cmds/LinearAnchorEditorCmd"));

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

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




var _ = _FCore.default._;
var $ = _FCore.default.$;
/**
 * @extends BaseAnchorEditor
 * @param {LayoutEditor} layoutEditor
 */

function LinearAnchorEditor(layoutEditor) {
  _BaseAnchorEditor.default.call(this, layoutEditor);

  this.cmdRunner.assign(_LinearAnchorEditorCmd.default);
  var self = this;
  this.$modal = _({
    style: {
      zIndex: '10000000',
      left: '1px',
      right: '1px',
      top: '1px',
      bottom: '1px',
      position: 'fixed'
    }
  });
  this.$marginBox = _('resizebox').on('click', this.focusMarginBox.bind(this)).on('beginmove', this.ev_beginMove.bind(this, true)).on('moving', this.ev_movingMargin.bind(this, true)).on('endmove', this.ev_endMove.bind(this, true));
  this.$resizeBox = _('resizebox').on('mousedown', this.focus.bind(this)).on('beginmove', this.ev_beginMove.bind(this, true)).on('moving', this.ev_moving.bind(this, true)).on('endmove', this.ev_endMove.bind(this, true)).on('click', function (ev) {
    self.emit('click', ev, true);
  }).on('dblclick', this.ev_dblClick);
  this.$resizeBox.defineEvent('contextmenu');
  this.$resizeBox.on('contextmenu', this.ev_contextMenu.bind(this));
  this.movingData = null;
  this.isFocus = false;
}

_OOP.default.mixClass(LinearAnchorEditor, _BaseAnchorEditor.default);

LinearAnchorEditor.prototype.ev_contextMenu = function (event) {
  var self = this;
  var items = [];

  function makeItem(name) {
    if (name === null) return '=====';
    var cmdDescriptor = _LinearAnchorEditorCmd.LinearAnchorEditorCmdDescriptors[name];
    var res = {
      icon: cmdDescriptor.icon,
      text: cmdDescriptor.desc,
      cmd: name
    };

    if (cmdDescriptor.bindKey && cmdDescriptor.bindKey.win) {
      res.key = cmdDescriptor.bindKey.win;
    }

    return res;
  }

  items = ['horizontalAlignLeft', 'horizontalAlignCenter', 'horizontalAlignRight'].concat(this.layoutEditor.anchorEditors.length > 1 ? [] : ['equaliseWidth']).concat([null, 'verticalAlignTop', 'verticalAlignCenter', 'verticalAlignBottom']).concat(this.layoutEditor.anchorEditors.length > 1 ? [] : ['equaliseHeight']).concat([null]).map(makeItem);

  if (this.layoutEditor.anchorEditors.length == 1 && this.layoutEditor.anchorEditors[0].component.isLayout) {
    items.push({
      icon: 'span.mdi.mdi-square-edit-outline[style="color:blue"]',
      text: 'Edit Layout',
      cmd: this.execCmd.bind(this, 'layoutEdit')
    });
  }

  items.push({
    icon: 'span.mdi.mdi-delete-variant[style="color:red"]',
    text: 'Delete',
    cmd: 'delete'
  });
  event.showContextMenu({
    items: items,
    extendStyle: {
      fontSize: '12px'
    }
  }, function (event) {
    var cmd = event.menuItem.cmd;

    if (typeof cmd == 'function') {
      cmd();
      self.layoutEditor.notifyDataChange();
    } else if (typeof cmd == 'string') {
      self.layoutEditor.execCmd(cmd);
    }

    self.layoutEditor.getView().focus();
  }); // event.stopPropagation();
};

LinearAnchorEditor.prototype.focusMarginBox = function () {
  if (!this.component) return;

  if (this.isFocus) {// this.$resizeBox.removeClass('as-focus');// this is feature, not bug
    // this.$marginBox.addClass('as-focus');
  } else {
    // this.$marginBox.addClass('as-focus');
    this.$resizeBox.addClass('as-focus');
    this.isFocus = true;
    var editor;

    for (var i = 0; i < this.layoutEditor.anchorEditors.length; ++i) {
      editor = this.layoutEditor.anchorEditors[i];
      if (editor == this) continue;
      editor.blur();
    }

    this.emit('focus', {
      type: 'focus',
      target: this
    }, this);
  }
};

LinearAnchorEditor.prototype.focus = function () {
  if (!this.component) return;
  this.$resizeBox.addClass('as-focus');
  this.$marginBox.removeClass('as-focus');
  if (this.isFocus) return;
  this.isFocus = true;
  var editor;

  for (var i = 0; i < this.layoutEditor.anchorEditors.length; ++i) {
    editor = this.layoutEditor.anchorEditors[i];
    if (editor == this) continue;
    editor.blur();
  }

  this.emit('focus', {
    type: 'focus',
    target: this
  }, this);
};

LinearAnchorEditor.prototype.blur = function () {
  if (!this.isFocus) return;
  this.isFocus = false;
  this.$resizeBox.removeClass('as-focus');
  this.emit('blur', {
    type: 'blur',
    target: this
  }, this);
};

LinearAnchorEditor.prototype.update = function () {
  if (this.component) {
    var styleDescriptors = this.component.getStyleDescriptors();

    if (styleDescriptors.top || styleDescriptors.bottom || styleDescriptors.left || styleDescriptors.right) {
      this.$marginBox.addTo(this.layoutEditor.$forceground);
    } else {
      this.$marginBox.selfRemove();
    }

    this.$resizeBox.addTo(this.layoutEditor.$forceground);
    this.$resizeBox.canMove = !!(styleDescriptors.top || styleDescriptors.bottom || styleDescriptors.left || styleDescriptors.right);
    this.$resizeBox.canResize = !!(styleDescriptors.width || styleDescriptors.height);
    this.$marginBox.canClick = !!(styleDescriptors.top || styleDescriptors.bottom || styleDescriptors.left || styleDescriptors.right);
    this.$marginBox.canResize = true;
    this.updatePosition();
  } else {
    this.$resizeBox.remove();
    this.$marginBox.remove();
  }
};

LinearAnchorEditor.prototype.updatePosition = function () {
  if (this.component) {
    var bound = this.layoutEditor.$forceground.getBoundingClientRect();
    var compBound = this.component.view.getBoundingClientRect();
    this.$resizeBox.addStyle({
      left: (compBound.left - bound.left) / this.layoutEditor._softScale + 'px',
      top: (compBound.top - bound.top) / this.layoutEditor._softScale + 'px',
      width: compBound.width / this.layoutEditor._softScale + 'px',
      height: compBound.height / this.layoutEditor._softScale + 'px'
    });
    this.$marginBox.addStyle({
      left: (compBound.left - bound.left) / this.layoutEditor._softScale - this.component.getStyle('left', 'px') + 'px',
      top: (compBound.top - bound.top) / this.layoutEditor._softScale - this.component.getStyle('top', 'px') + 'px',
      width: compBound.width / this.layoutEditor._softScale + this.component.getStyle('left', 'px') + this.component.getStyle('right', 'px') + 'px',
      height: compBound.height / this.layoutEditor._softScale + this.component.getStyle('top', 'px') + this.component.getStyle('bottom', 'px') + 'px'
    });
  }
};

LinearAnchorEditor.prototype.ev_beginMove = function (userAction, event) {
  var bound = this.layoutEditor.$forceground.getBoundingClientRect();
  this.movingData = {
    x0: (event.clientX - bound.left) / this.layoutEditor._softScale,
    y0: (event.clientY - bound.top) / this.layoutEditor._softScale,
    dx: 0,
    dy: 0,
    option: event.option,
    styleDescriptors: this.component.getStyleDescriptors(),
    style0: Object.assign({}, this.component.style, {
      left: this.component.getStyle('left', 'px'),
      right: this.component.getStyle('right', 'px'),
      top: this.component.getStyle('top', 'px'),
      bottom: this.component.getStyle('bottom', 'px'),
      width: this.component.getStyle('width', 'px'),
      height: this.component.getStyle('height', 'px')
    }),
    comp: this.component,
    isChange: false
  };

  if (userAction) {
    this.emit('beginmove', {
      type: 'beginmove',
      target: this,
      originEvent: event,
      repeatEvent: event
    }, this);
    this.$modal.addTo(document.body);
    this.layoutEditor.$mouseOffsetStatus.children[2].innerHTML = ' Δ' + this.movingData.dx + ', ' + this.movingData.dy;
  }
};

LinearAnchorEditor.prototype.ev_moving = function (userAction, event) {
  var movingData = this.movingData;
  var bound = this.layoutEditor.$forceground.getBoundingClientRect();
  var x = (event.clientX - bound.left) / this.layoutEditor._softScale;
  var y = (event.clientY - bound.top) / this.layoutEditor._softScale;
  movingData.dx = x - movingData.x0;
  movingData.dy = y - movingData.y0;
  var positionIsChange = false;

  if (movingData.styleDescriptors.left && !movingData.styleDescriptors.left.disabled && (movingData.option.left || movingData.option.body)) {
    movingData.comp.setStyle('left', Math.max(0, movingData.style0.left + movingData.dx), 'px');
    positionIsChange = true;
  }

  if (movingData.styleDescriptors.right && !movingData.styleDescriptors.right.disabled && (movingData.option.right || movingData.option.body)) {
    movingData.comp.setStyle('right', Math.max(0, movingData.style0.right - movingData.dx), 'px');
    positionIsChange = true;
  }

  if (movingData.styleDescriptors.width && !movingData.styleDescriptors.width.disabled) {
    if (movingData.option.left) {
      if (!!movingData.styleDescriptors.left.disabled && !!movingData.styleDescriptors.right.disabled) {
        movingData.comp.setStyle('width', Math.max(movingData.comp.measureMinSize().width, movingData.style0.width - movingData.dx * 2), 'px');
      } else {
        movingData.comp.setStyle('width', Math.max(movingData.style0.width - movingData.dx), 'px');
      }

      positionIsChange = true;
    }

    if (movingData.option.right) {
      if (movingData.styleDescriptors.left && !!movingData.styleDescriptors.left.disabled && !!movingData.styleDescriptors.right.disabled) {
        movingData.comp.setStyle('width', Math.max(movingData.comp.measureMinSize().width, movingData.style0.width + movingData.dx * 2), 'px'); //center align
      } else {
        movingData.comp.setStyle('width', Math.max(movingData.comp.measureMinSize().width, movingData.style0.width + movingData.dx), 'px');
      }

      positionIsChange = true;
    }
  }

  if (movingData.styleDescriptors.top && !movingData.styleDescriptors.top.disabled && (movingData.option.top || movingData.option.body)) {
    movingData.comp.setStyle('top', Math.max(0, movingData.style0.top + movingData.dy), 'px');
    positionIsChange = true;
  }

  if (movingData.styleDescriptors.bottom && !movingData.styleDescriptors.bottom.disabled && (movingData.option.bottom || movingData.option.body)) {
    movingData.comp.setStyle('bottom', Math.max(0, movingData.style0.bottom - movingData.dy), 'px');
    positionIsChange = true;
  }

  if (movingData.styleDescriptors.height && !movingData.styleDescriptors.height.disabled) {
    if (movingData.option.top) {
      if (movingData.styleDescriptors.top && !!movingData.styleDescriptors.top.disabled && !!movingData.styleDescriptors.bottom.disabled) {
        movingData.comp.setStyle('height', Math.max(movingData.comp.measureMinSize().height, movingData.style0.height - movingData.dy * 2), 'px');
      } else {
        movingData.comp.setStyle('height', Math.max(movingData.comp.measureMinSize().height, movingData.style0.height - movingData.dy), 'px');
      }

      positionIsChange = true;
    }

    if (movingData.option.bottom) {
      if (movingData.styleDescriptors.top && !!movingData.styleDescriptors.top.disabled && !!movingData.styleDescriptors.bottom.disabled) {
        movingData.comp.setStyle('height', Math.max(movingData.comp.measureMinSize().height, movingData.style0.height + movingData.dy * 2), 'px');
      } else {
        movingData.comp.setStyle('height', Math.max(movingData.comp.measureMinSize().height, movingData.style0.height + movingData.dy), 'px');
      }

      positionIsChange = true;
    }
  }

  this.updatePosition();

  if (positionIsChange) {
    this.emit("reposition", {
      type: 'reposition',
      component: movingData.comp,
      movingData: movingData,
      originEvent: event,
      repeatEvent: event
    }, this);
    movingData.isChange = true;

    _ResizeSystem.default.updateDown(movingData.comp.view);
  }

  if (userAction) {
    this.emit('moving', {
      taget: this,
      type: 'moving',
      originEvent: event,
      repeatEvent: event,
      target: this
    }, this);
    this.layoutEditor.$mouseOffsetStatus.children[2].innerHTML = ' Δ' + this.movingData.dx + ', ' + this.movingData.dy;
  }
};

LinearAnchorEditor.prototype.ev_movingMargin = function (userAction, event) {
  var movingData = this.movingData;
  var bound = this.layoutEditor.$forceground.getBoundingClientRect();
  var x = (event.clientX - bound.left) / this.layoutEditor._softScale;
  var y = (event.clientY - bound.top) / this.layoutEditor._softScale;
  movingData.dx = x - movingData.x0;
  movingData.dy = y - movingData.y0;
  var positionIsChange = false;

  if (movingData.styleDescriptors.bottom && event.option.bottom) {
    movingData.comp.setStyle('bottom', Math.max(0, movingData.style0.bottom + movingData.dy), 'px');
    positionIsChange = true;
  }

  if (movingData.styleDescriptors.right && event.option.right) {
    movingData.comp.setStyle('right', Math.max(0, movingData.style0.right + movingData.dx), 'px');
    positionIsChange = true;
  }

  this.updatePosition();

  if (positionIsChange) {
    this.emit("reposition", {
      type: 'reposition',
      component: movingData.comp,
      movingData: movingData,
      originEvent: event
    }, this);
    movingData.isChange = true;
  }

  if (userAction) {
    this.emit('moving', {
      taget: this,
      type: 'moving',
      originEvent: event,
      target: this
    }, this);
    this.layoutEditor.$mouseOffsetStatus.children[2].innerHTML = ' Δ' + this.movingData.dx + ', ' + this.movingData.dy;
  }
};

LinearAnchorEditor.prototype.ev_endMove = function (userAction, event) {
  if (this.movingData.isChange) {
    this.emit('change', {
      type: 'change',
      target: this,
      component: this.movingData.comp,
      originEvent: event
    }, this);
  }

  this.movingData = undefined;

  if (userAction) {
    this.emit('endmove', {
      taget: this,
      type: 'moving',
      originEvent: event,
      target: this
    }, this);
    setTimeout(this.$modal.selfRemove.bind(this.$modal), 100);
    this.layoutEditor.$mouseOffsetStatus.children[2].innerHTML = '';
  }
};

LinearAnchorEditor.prototype.alignHorizontalCenter = function (centerValue) {
  // right - left
  if (!this.component) return;
  var currentHAlign = this.component.getStyle('hAlign');
  var cRight = this.component.getStyle('right');
  var cLeft = this.component.getStyle('left');
  var newLeft = (cRight + cLeft - centerValue) / 2;
  var newRight = (cRight + cLeft + centerValue) / 2;

  switch (currentHAlign) {
    case 'right':
      this.component.setStyle('right', newRight);
      break;

    case 'fixed':
      this.component.setStyle('left', newLeft);
      this.component.setStyle('right', newRight);
      break;

    case 'left':
      this.component.setStyle('left', newLeft);
      break;

    case 'center':
      //noway to align center
      break;
  }

  this.updatePosition();
};

LinearAnchorEditor.prototype.equaliseWidth = function (widthValue) {
  if (!this.component) return;
  this.component.setStyle('width', widthValue, 'px');
  this.updatePosition();
};

LinearAnchorEditor.prototype.equaliseHeight = function (heightValue) {
  if (!this.component) return;
  this.component.setStyle('height', heightValue, 'px');
  this.updatePosition();
};

LinearAnchorEditor.prototype.verticalAlignTop = function () {
  if (!this.component) return;
  var styleBot = this.component.getStyle('top', 'px') + this.component.getStyle('bottom', 'px');
  this.component.setStyle('top', 0, 'px');
  this.component.setStyle('bottom', styleBot, 'px');
  this.updatePosition();
};

LinearAnchorEditor.prototype.verticalAlignCenter = function () {
  if (!this.component) return;
  var styleTopBot = (this.component.getStyle('top', 'px') + this.component.getStyle('bottom', 'px')) / 2;
  this.component.setStyle('top', styleTopBot, 'px');
  this.component.setStyle('bottom', styleTopBot, 'px');
  this.updatePosition();
};

LinearAnchorEditor.prototype.verticalAlignBottom = function () {
  if (!this.component) return;
  var styleTop = this.component.getStyle('top', 'px') + this.component.getStyle('bottom', 'px');
  this.component.setStyle('top', styleTop, 'px');
  this.component.setStyle('bottom', 0, 'px');
  this.updatePosition();
};

LinearAnchorEditor.prototype.horizontalAlignRight = function () {
  if (!this.component) return;
  var styleLeft = this.component.getStyle('left', 'px') + this.component.getStyle('right', 'px');
  this.component.setStyle('left', styleLeft, 'px');
  this.component.setStyle('right', 0, 'px');
  this.updatePosition();
};

LinearAnchorEditor.prototype.horizontalAlignLeft = function () {
  if (!this.component) return;
  var styleRight = this.component.getStyle('left', 'px') + this.component.getStyle('right', 'px');
  this.component.setStyle('right', styleRight, 'px');
  this.component.setStyle('left', 0, 'px');
  this.updatePosition();
};

LinearAnchorEditor.prototype.horizontalAlignCenter = function () {
  if (!this.component) return;
  var styleLeftRight = (this.component.getStyle('left', 'px') + this.component.getStyle('right', 'px')) / 2;
  this.component.setStyle('left', styleLeftRight, 'px');
  this.component.setStyle('right', styleLeftRight, 'px');
  this.updatePosition();
};

LinearAnchorEditor.prototype.getCmdGroupTree = function () {
  return _LinearAnchorEditorCmd.LinearAnchorEditorCmdTree;
};

LinearAnchorEditor.prototype.getCmdDescriptor = function (name) {
  return _LinearAnchorEditorCmd.LinearAnchorEditorCmdDescriptors[name];
};

LinearAnchorEditor.prototype.execCmd = function () {
  return this.cmdRunner.invoke.apply(this.cmdRunner, arguments);
};

var _default = LinearAnchorEditor;
exports.default = _default;
VaKeR 2022