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__RelativeAnchorEditor.js
/*** module: node_modules/absol-form/js/anchoreditors/RelativeAnchorEditor.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 _RelativeAnchorEditorCmd = _interopRequireWildcard(require("../cmds/RelativeAnchorEditorCmd"));
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 RelativeAnchorEditor(layoutEditor) {
_BaseAnchorEditor.default.call(this, layoutEditor);
this.cmdRunner.assign(_RelativeAnchorEditorCmd.default);
var self = this;
this.$modal = _({
style: {
zIndex: '10000000',
left: '1px',
right: '1px',
top: '1px',
bottom: '1px',
position: 'fixed'
}
});
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.$topAlignLine = _('vline');
this.$bottomAlignLine = _('vline');
this.$leftAlignLine = _('hline');
this.$rightAlignLine = _('hline');
this.movingData = null;
this.isFocus = false;
this.snapDistance = 2;
}
_OOP.default.mixClass(RelativeAnchorEditor, _BaseAnchorEditor.default);
RelativeAnchorEditor.prototype.ev_contextMenu = function (event) {
var self = this;
var items = [];
function makeItem(name) {
if (name === null) return '=====';
var cmdDescriptor = _RelativeAnchorEditorCmd.RelativeAnchorEditorCmdDescriptors[name];
var res = {
icon: cmdDescriptor.icon,
text: cmdDescriptor.desc,
cmd: name
};
if (cmdDescriptor.bindKey && cmdDescriptor.bindKey.win) {
res.key = cmdDescriptor.bindKey.win;
}
return res;
}
if (this.layoutEditor.anchorEditors.length > 1) {
items.push.apply(items, ['alignLeftDedge', 'alignHorizontalCenter', 'alignRightDedge', 'equaliseWidth', null, 'alignTopDedge', 'alignVerticalCenter', 'alignBottomDedge', 'equaliseHeight', null].map(makeItem));
}
if (this.layoutEditor.anchorEditors.length > 2) {
items.push.apply(items, ['distributeHorizontalLeft', 'distributeHorizontalCenter', 'distributeHorizontalRight', 'distributeHorizontalDistance', null, 'distributeVerticalTop', 'distributeVerticalCenter', 'distributeVerticalBottom', 'distributeVerticalDistance', 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();
};
RelativeAnchorEditor.prototype.focus = function () {
if (!this.component) return;
if (this.isFocus) return;
this.isFocus = true;
this.$resizeBox.addClass('as-focus');
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);
};
RelativeAnchorEditor.prototype.blur = function () {
if (!this.isFocus) return;
this.isFocus = false;
this.$resizeBox.removeClass('as-focus');
this.emit('blur', {
type: 'blur',
target: this
}, this);
};
RelativeAnchorEditor.prototype.update = function () {
if (this.component) {
this.$resizeBox.addTo(this.layoutEditor.$forceground);
var styleDescriptors = this.component.getStyleDescriptors();
this.$resizeBox.canMove = !!(styleDescriptors.top || styleDescriptors.bottom || styleDescriptors.left || styleDescriptors.right);
this.$resizeBox.canResize = !!(styleDescriptors.width || styleDescriptors.height);
if (!styleDescriptors.top || styleDescriptors.top.disabled) {
this.$topAlignLine.remove();
} else {
this.$topAlignLine.addTo(this.layoutEditor.$forceground);
}
if (!styleDescriptors.bottom || styleDescriptors.bottom.disabled) {
this.$bottomAlignLine.remove();
} else {
this.$bottomAlignLine.addTo(this.layoutEditor.$forceground);
}
if (!styleDescriptors.left || styleDescriptors.left.disabled) {
this.$leftAlignLine.remove();
} else {
this.$leftAlignLine.addTo(this.layoutEditor.$forceground);
}
if (!styleDescriptors.right || styleDescriptors.right.disabled) {
this.$rightAlignLine.remove();
} else {
this.$rightAlignLine.addTo(this.layoutEditor.$forceground);
}
this.updatePosition();
} else {
this.$resizeBox.remove();
this.$leftAlignLine.remove();
this.$rightAlignLine.remove();
this.$topAlignLine.remove();
this.$bottomAlignLine.remove();
}
};
RelativeAnchorEditor.prototype.updatePosition = function () {
if (this.component) {
var bound = this.layoutEditor.$forceground.getBoundingClientRect();
var compBound = this.component.view.getBoundingClientRect();
var styleLeft = this.component.getStyle('left', 'px');
var styleTop = this.component.getStyle('top', 'px');
var styleRight = this.component.getStyle('right', 'px');
var styleBottom = this.component.getStyle('bottom', 'px');
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'
});
if (this.$leftAlignLine.parentNode) this.$leftAlignLine.addStyle({
left: (compBound.left - bound.left) / this.layoutEditor._softScale - styleLeft + 'px',
width: styleLeft + 'px',
top: (compBound.top - bound.top + compBound.height / 2) / this.layoutEditor._softScale + 'px'
});
if (this.$rightAlignLine.parentNode) this.$rightAlignLine.addStyle({
left: (compBound.right - bound.left) / this.layoutEditor._softScale + 'px',
width: styleRight + 'px',
top: (compBound.top - bound.top + compBound.height / 2) / this.layoutEditor._softScale + 'px'
});
if (this.$topAlignLine.parentNode) this.$topAlignLine.addStyle({
top: (compBound.top - bound.top) / this.layoutEditor._softScale - styleTop + 'px',
height: styleTop + 'px',
left: (compBound.left - bound.left + compBound.width / 2) / this.layoutEditor._softScale + 'px'
});
if (this.$bottomAlignLine.parentNode) this.$bottomAlignLine.addStyle({
top: (compBound.bottom - bound.top) / this.layoutEditor._softScale + 'px',
height: styleBottom + 'px',
left: (compBound.left - bound.left + compBound.width / 2) / this.layoutEditor._softScale + 'px'
});
}
};
RelativeAnchorEditor.prototype.ev_beginMove = function (userAction, event) {
var bound = this.layoutEditor.$forceground.getBoundingClientRect();
var snapLines = this.getSnapLines();
this.movingData = {
userAction: userAction,
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,
snapLines: snapLines,
$snapXLines: [],
$snapYLines: [],
nearestYVal: 10000000,
nearestY: [],
nearestXVal: 10000000,
nearestX: []
};
if (userAction) {
this.emit('beginmove', {
type: 'beginmove',
target: this,
originEvent: event.originEvent || event,
repeatEvent: event
}, this);
this.$modal.addTo(document.body);
this._updateSnapLines();
this.layoutEditor.$mouseOffsetStatus.children[2].innerHTML = ' Δ' + this.movingData.dx + ', ' + this.movingData.dy;
}
};
RelativeAnchorEditor.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;
if (event.originEvent.ctrlKey) {
var newW, newH, dH, dW;
if (movingData.option.body) {
if (Math.abs(movingData.dx) < Math.abs(movingData.dy)) {
movingData.dx = 0;
} else {
movingData.dy = 0;
}
} else {
if (movingData.option.right) {
if (!!movingData.styleDescriptors.left.disabled && !!movingData.styleDescriptors.right.disabled) {
newW = Math.max(0, movingData.style0.width + movingData.dx * 2);
} else {
newW = Math.max(0, movingData.style0.width + movingData.dx);
}
newH = movingData.style0.height * newW / Math.max(1, movingData.style0.width);
} else if (movingData.option.left) {
if (!!movingData.styleDescriptors.left.disabled && !!movingData.styleDescriptors.right.disabled) {
newW = Math.max(0, movingData.style0.width - movingData.dx * 2);
} else {
newW = Math.max(0, movingData.style0.width - movingData.dx);
}
newH = movingData.style0.height * newW / Math.max(1, movingData.style0.width);
}
}
if (movingData.option.bottom) {
movingData.dy = newH - movingData.style0.height;
if (!!movingData.styleDescriptors.top.disabled && !!movingData.styleDescriptors.bottom.disabled) {
movingData.dy /= 2;
}
} else if (movingData.option.top) {
movingData.dy = -(newH - movingData.style0.height);
if (!!movingData.styleDescriptors.top.disabled && !!movingData.styleDescriptors.bottom.disabled) {
movingData.dy /= 2;
}
}
}
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.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.originEvent || event,
target: this,
repeatEvent: event
}, this);
this._updateSnapLines();
this.layoutEditor.$mouseOffsetStatus.children[2].innerHTML = ' Δ' + this.movingData.dx + ', ' + this.movingData.dy;
}
};
RelativeAnchorEditor.prototype.ev_endMove = function (userAction, event) {
if (this.movingData.isChange) {
this.emit('change', {
type: 'change',
target: this,
component: this.movingData.comp,
originEvent: event.originEvent || event,
repeatEvent: event
}, this);
}
if (userAction) {
this.emit('endmove', {
taget: this,
type: 'moving',
originEvent: event.originEvent || event,
target: this,
repeatEvent: event
}, this);
this.$modal.remove();
this.layoutEditor.$mouseOffsetStatus.children[2].innerHTML = '';
this.movingData.$snapYLines.forEach(function (e) {
e.remove();
});
this.movingData.$snapXLines.forEach(function (e) {
e.remove();
});
if (this.movingData.nearestXVal <= this.snapDistance) {
var firsLineX = this.movingData.nearestX[0];
if (firsLineX.flat & 1) {
this.alignLeftDedge(firsLineX.value, this.movingData.body);
} else if (firsLineX.flat & 2) {
this.alignHorizontalCenter(this.layoutEditor.rootLayout.style.width - 2 * firsLineX.value);
} else if (firsLineX.flat & 4) {
this.alignRightDedge(this.layoutEditor.rootLayout.style.width - firsLineX.value, this.movingData.body);
}
}
if (this.movingData.nearestYVal <= this.snapDistance) {
var firsLineY = this.movingData.nearestY[0];
if (firsLineY.flat & 1) {
this.alignTopDedge(firsLineY.value, this.movingData.body);
} else if (firsLineY.flat & 2) {
this.alignVerticalCenter(this.layoutEditor.rootLayout.style.height - 2 * firsLineY.value);
} else if (firsLineY.flat & 4) {
this.alignBottomDedge(this.layoutEditor.rootLayout.style.height - firsLineY.value, this.movingData.body);
}
}
}
;
this.movingData = undefined;
};
RelativeAnchorEditor.prototype._updateSnapLines = function () {
return; //todo
// as-align-horizontal-lin
var nearestYVal = 10000;
var nearestY = [];
var top = this.component.style.top;
var middleY = this.component.style.top + this.component.style.height / 2;
var bottom = this.component.style.top + this.component.style.height;
var yLines = this.movingData.snapLines.y;
var line;
var dist;
var yIsSmaller;
var option = this.movingData.option;
for (var i = 0; i < yLines.length; ++i) {
line = yLines[i];
if (line.flat & 1 && (option.body || option.top)) {
dist = Math.abs(line.value - top);
if (dist < nearestYVal) {
nearestY = [line];
nearestYVal = dist;
yIsSmaller = line.value < top;
} else if (dist == nearestYVal && line.value < top == yIsSmaller) {
nearestY.push(line);
}
} else if (line.flat & 2 && option.body) {
dist = Math.abs(line.value - middleY);
if (dist < nearestYVal) {
nearestY = [line];
nearestYVal = dist;
yIsSmaller = line.value < middleY;
} else if (dist == nearestYVal && line.value < middleY == yIsSmaller) {
nearestY.push(line);
}
} else if (line.flat & 4 && (option.body || option.bottom)) {
dist = Math.abs(line.value - bottom);
if (dist < nearestYVal) {
nearestY = [line];
nearestYVal = dist;
yIsSmaller = line.value < bottom;
} else if (dist == nearestYVal && line.value < bottom == yIsSmaller) {
nearestY.push(line);
}
} // if
}
var layoutBound = this.layoutEditor.rootLayout.domElt.getBoundingClientRect();
var forcegroundBound = this.layoutEditor.$forceground.getBoundingClientRect();
while (this.movingData.$snapYLines.length < nearestY.length) {
this.movingData.$snapYLines.push(_({
class: 'as-align-horizontal-line',
style: {
left: layoutBound.left - forcegroundBound.left + 'px',
width: layoutBound.width + 'px'
}
}).addTo(this.layoutEditor.$forceground));
}
while (this.movingData.$snapYLines.length > nearestY.length) {
this.movingData.$snapYLines.pop().remove();
}
for (var i = 0; i < nearestY.length; ++i) {
this.movingData.$snapYLines[i].addStyle('top', layoutBound.left - forcegroundBound.left + nearestY[i].value + 'px');
if (nearestYVal <= this.snapDistance) {
this.movingData.$snapYLines[i].addClass('as-active');
} else {
this.movingData.$snapYLines[i].removeClass('as-active');
}
}
this.movingData.nearestY = nearestY;
this.movingData.nearestYVal = nearestYVal;
var nearestXVal = 10000;
var nearestX = [];
var left = this.component.style.left;
var middleX = this.component.style.left + this.component.style.width / 2;
var right = this.component.style.left + this.component.style.width;
var xLines = this.movingData.snapLines.x;
var line;
var dist;
var xIsSmaller;
for (var i = 0; i < xLines.length; ++i) {
line = xLines[i];
if (line.flat & 1 && (option.body || option.left)) {
dist = Math.abs(line.value - left);
if (dist < nearestXVal) {
nearestX = [line];
nearestXVal = dist;
xIsSmaller = line.value < left;
} else if (dist == nearestXVal && line.value < left == xIsSmaller) {
nearestX.push(line);
}
} else if (line.flat & 2 && option.body) {
dist = Math.abs(line.value - middleX);
if (dist < nearestXVal) {
nearestX = [line];
nearestXVal = dist;
xIsSmaller = line.value < middleX;
} else if (dist == nearestXVal && line.value < middleX == xIsSmaller) {
nearestX.push(line);
}
} else if (line.flat & 4 && (option.body || option.right)) {
dist = Math.abs(line.value - right);
if (dist < nearestXVal) {
nearestX = [line];
nearestXVal = dist;
xIsSmaller = line.value < right;
} else if (dist == nearestXVal && line.value < right == xIsSmaller) {
nearestX.push(line);
}
} // if
}
var layoutBound = this.layoutEditor.rootLayout.domElt.getBoundingClientRect();
var forcegroundBound = this.layoutEditor.$forceground.getBoundingClientRect();
while (this.movingData.$snapXLines.length < nearestX.length) {
this.movingData.$snapXLines.push(_({
class: 'as-align-vertical-line',
style: {
top: layoutBound.top - forcegroundBound.top + 'px',
height: layoutBound.height + 'px'
}
}).addTo(this.layoutEditor.$forceground));
}
while (this.movingData.$snapXLines.length > nearestX.length) {
this.movingData.$snapXLines.pop().remove();
}
for (var i = 0; i < nearestX.length; ++i) {
this.movingData.$snapXLines[i].addStyle('left', layoutBound.left - forcegroundBound.left + nearestX[i].value + 'px');
if (nearestXVal <= this.snapDistance) {
this.movingData.$snapXLines[i].addClass('as-active');
} else {
this.movingData.$snapXLines[i].removeClass('as-active');
}
}
this.movingData.nearestX = nearestX;
this.movingData.nearestXVal = nearestXVal;
};
RelativeAnchorEditor.prototype.alignLeftDedge = function (leftValue, keepSize) {
if (!this.component) return;
var lLeft = this.component.getStyle('left', 'px');
var lRight = this.component.getStyle('right', 'px');
var currentHAlign = this.component.getStyle('hAlign');
switch (currentHAlign) {
case 'left':
this.component.setStyle('left', leftValue, 'px');
break;
case 'fixed':
this.component.setStyle('left', leftValue, 'px');
if (keepSize) {
this.component.setStyle('right', lRight - (leftValue - lLeft), 'px');
}
break;
case 'right':
this.component.setStyle('right', this.component.getStyle('right') + (leftValue - this.component.getStyle('left')), 'px');
break;
case 'center':
var center = this.component.getStyle('left', 'px') + this.component.getStyle('width', 'px') / 2;
if (center - this.component.measureMinSize().width / 2 >= leftValue) {
this.component.setStyle('width', (center - leftValue) * 2, 'px');
}
break;
}
this.updatePosition();
};
RelativeAnchorEditor.prototype.alignRightDedge = function (rightValue, keepSize) {
if (!this.component) return;
var currentHAlign = this.component.getStyle('hAlign');
var lLeft = this.component.getStyle('left', 'px');
var lRight = this.component.getStyle('right', 'px');
var dX = lRight - rightValue;
switch (currentHAlign) {
case 'right':
this.component.setStyle('right', rightValue, 'px');
break;
case 'fixed':
this.component.setStyle('right', rightValue, 'px');
if (keepSize) {
this.component.setStyle('left', lLeft - dX, 'px');
}
break;
case 'left':
this.component.setStyle('left', lLeft + dX, 'px');
break;
case 'center':
if (!keepSize) {
var center = this.component.getStyle('right', 'px') - this.component.getStyle('width', 'px') / 2;
if (center + this.component.measureMinSize().width / 2 <= rightValue) {
this.component.setStyle('width', (rightValue - center) * 2, 'px');
}
}
break;
}
this.updatePosition();
};
RelativeAnchorEditor.prototype.alignHorizontalCenter = function (centerValue) {
// right - left
if (!this.component) return;
var currentHAlign = this.component.getStyle('hAlign', 'px');
var cRight = this.component.getStyle('right', 'px');
var cLeft = this.component.getStyle('left', 'px');
var newLeft = (cRight + cLeft - centerValue) / 2;
var newRight = (cRight + cLeft + centerValue) / 2;
switch (currentHAlign) {
case 'right':
this.component.setStyle('right', newRight, 'px');
break;
case 'fixed':
this.component.setStyle('left', newLeft, 'px');
this.component.setStyle('right', newRight, 'px');
break;
case 'left':
this.component.setStyle('left', newLeft, 'px');
break;
case 'center':
//noway to align center
break;
}
this.updatePosition();
};
RelativeAnchorEditor.prototype.equaliseWidth = function (widthValue) {
if (!this.component) return;
var currentHAlign = this.component.getStyle('hAlign');
var cRight = this.component.getStyle('right', 'px');
var cLeft = this.component.getStyle('left', 'px');
var cWidth = this.component.getStyle('width', 'px');
var dw = widthValue - cWidth;
switch (currentHAlign) {
case 'right':
if (cLeft < dw) this.component.setStyle('right', cRight - (dw - cLeft), 'px');
this.component.setStyle('width', widthValue, 'px');
break;
case 'left':
if (cRight < dw) this.component.setStyle('left', cLeft - (dw - cWidth), 'px');
this.component.setStyle('width', widthValue, 'px');
break;
case 'fixed':
if (dw > cRight) {
this.component.setStyle('right', 0, 'px');
this.component.setStyle('left', cLeft - (dw - cWidth), 'px');
} else {
this.component.setStyle('right', cRight - dw, 'px');
}
break;
case 'center':
this.component.setStyle('width', widthValue, 'px');
break;
}
this.updatePosition();
};
RelativeAnchorEditor.prototype.alignTopDedge = function (topValue, keepSize) {
if (!this.component) return;
var currentVAlign = this.component.getStyle('vAlign');
var lTop = this.component.style.top;
var lBottom = this.component.style.bottom;
switch (currentVAlign) {
case 'top':
this.component.setStyle('top', topValue, 'px');
break;
case 'fixed':
this.component.setStyle('top', topValue, 'px');
if (keepSize) {
this.component.setStyle('bottom', lBottom - (topValue - lTop), 'px');
}
break;
case 'bottom':
this.component.setStyle('bottom', this.component.getStyle('bottom', 'px') + (topValue - this.component.getStyle('top')), 'px');
break;
case 'center':
var center = this.component.getStyle('top', 'px') + this.component.getStyle('height', 'px') / 2;
if (center - this.component.measureMinSize().height / 2 >= topValue) {
this.component.setStyle('height', (center - topValue) * 2, 'px');
}
break;
}
this.updatePosition();
};
RelativeAnchorEditor.prototype.alignBottomDedge = function (bottomValue, keepSize) {
if (!this.component) return;
var currentVAlign = this.component.getStyle('vAlign');
var lBottom = this.component.getStyle('bottom', 'px');
var lTop = this.component.getStyle('top', 'px');
switch (currentVAlign) {
case 'bottom':
this.component.setStyle('bottom', bottomValue, 'px');
break;
case 'fixed':
this.component.setStyle('bottom', bottomValue, 'px');
if (keepSize) {
this.component.setStyle('top', lTop - (bottomValue - lBottom), 'px');
}
break;
case 'top':
var dY = lBottom - bottomValue;
this.component.setStyle('top', lTop + dY, 'px');
break;
case 'center':
var center = this.component.getStyle('bottom', 'px') - this.component.getStyle('height', 'px') / 2;
if (center + this.component.measureMinSize().height / 2 <= bottomValue) {
this.component.setStyle('height', (bottomValue - center) * 2, 'px');
}
break;
}
this.updatePosition();
};
RelativeAnchorEditor.prototype.alignVerticalCenter = function (centerValue) {
// bottom - top
if (!this.component) return;
var currentVAlign = this.component.getStyle('vAlign');
var cBottom = this.component.getStyle('bottom', 'px');
var cTop = this.component.getStyle('top', 'px');
var newTop = (cBottom + cTop - centerValue) / 2;
var newBottom = (cBottom + cTop + centerValue) / 2;
switch (currentVAlign) {
case 'bottom':
this.component.setStyle('bottom', newBottom, 'px');
break;
case 'fixed':
this.component.setStyle('top', newTop, 'px');
this.component.setStyle('bottom', newBottom, 'px');
break;
case 'top':
this.component.setStyle('top', newTop, 'px');
break;
case 'center':
//noway to align center
break;
}
this.updatePosition();
};
RelativeAnchorEditor.prototype.equaliseHeight = function (heightValue) {
if (!this.component) return;
var currentVAlign = this.component.getStyle('vAlign');
var cBottom = this.component.getStyle('bottom', 'px');
var cTop = this.component.getStyle('top', 'px');
var cHeight = this.component.getStyle('height', 'px');
var dh = heightValue - cHeight;
switch (currentVAlign) {
case 'bottom':
if (cTop < dh) this.component.setStyle('bottom', cBottom - (dh - cTop), 'px');
this.component.setStyle('height', heightValue, 'px');
break;
case 'top':
if (cBottom < dh) this.component.setStyle('top', cTop - (dh - cHeight), 'px');
this.component.setStyle('height', heightValue, 'px');
break;
case 'fixed':
if (dh > cBottom) {
this.component.setStyle('bottom', 0, 'px');
this.component.setStyle('top', cTop - (dh - cHeight), 'px');
} else {
this.component.setStyle('bottom', cBottom - dh, 'px');
}
break;
case 'center':
this.component.setStyle('height', heightValue, 'px');
break;
}
this.updatePosition();
};
/**
* @returns {{x:Array<{components:Array, value:Number}>, y:Array<{components:Array, value:Number}, flat:Number>}}
*/
RelativeAnchorEditor.prototype.getSnapLines = function () {
if (!this.component.parent) return {
x: [],
y: []
};
var children = this.component.parent.children;
var xComp = [];
var yComp = [];
var comp;
for (var i = 0; i < children.length; ++i) {
comp = children[i];
if (this.component == comp) continue;
xComp.push({
component: comp,
value: comp.style.left,
flat: 1
});
xComp.push({
component: comp,
value: comp.style.left + comp.style.width / 2,
flat: 2
});
xComp.push({
component: comp,
value: comp.style.left + comp.style.width,
flat: 4
});
yComp.push({
component: comp,
value: comp.style.top,
flat: 1
});
yComp.push({
component: comp,
value: comp.style.top + comp.style.height / 2,
flat: 2
});
yComp.push({
component: comp,
value: comp.style.top + comp.style.height,
flat: 4
});
}
var cmp = function (a, b) {
return a.value - b.value;
};
xComp.sort(cmp);
yComp.sort(cmp);
var reducer = function (ac, cr) {
if (ac.last.value != cr.value) {
ac.last = {
components: [cr.component],
value: cr.value,
flat: 0
};
ac.result.push(ac.last);
} else {
if (ac.last.components.indexOf(cr.component) < 0) ac.last.components.push(cr.component);
}
ac.last.flat = ac.last.flat | cr.flat;
return ac;
};
return {
x: xComp.reduce(reducer, {
result: [],
last: {
value: -1000000,
components: [],
flat: 0
}
}).result,
y: yComp.reduce(reducer, {
result: [],
last: {
value: -1000000,
components: [],
flat: 0
}
}).result
};
};
RelativeAnchorEditor.prototype.getCmdGroupTree = function () {
return _RelativeAnchorEditorCmd.RelativeAnchorEditorCmdTree;
};
RelativeAnchorEditor.prototype.getCmdDescriptor = function (name) {
return _RelativeAnchorEditorCmd.RelativeAnchorEditorCmdDescriptors[name];
};
RelativeAnchorEditor.prototype.execCmd = function () {
return this.cmdRunner.invoke.apply(this.cmdRunner, arguments);
};
var _default = RelativeAnchorEditor;
exports.default = _default;
Server : Apache/2.4.41 (Ubuntu)