Yajbir Singh
3201 lines
128 KiB
JavaScript
3201 lines
128 KiB
JavaScript
/*
|
|
* (c) Copyright Ascensio System SIA 2010-2023
|
|
*
|
|
* This program is a free software product. You can redistribute it and/or
|
|
* modify it under the terms of the GNU Affero General Public License (AGPL)
|
|
* version 3 as published by the Free Software Foundation. In accordance with
|
|
* Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
|
|
* that Ascensio System SIA expressly excludes the warranty of non-infringement
|
|
* of any third-party rights.
|
|
*
|
|
* This program is distributed WITHOUT ANY WARRANTY; without even the implied
|
|
* warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For
|
|
* details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
|
|
*
|
|
* You can contact Ascensio System SIA at 20A-6 Ernesta Birznieka-Upish
|
|
* street, Riga, Latvia, EU, LV-1050.
|
|
*
|
|
* The interactive user interfaces in modified source and object code versions
|
|
* of the Program must display Appropriate Legal Notices, as required under
|
|
* Section 5 of the GNU AGPL version 3.
|
|
*
|
|
* Pursuant to Section 7(b) of the License you must retain the original Product
|
|
* logo when distributing the program. Pursuant to Section 7(e) we decline to
|
|
* grant you any rights under trademark law for use of our trademarks.
|
|
*
|
|
* All the Product's GUI elements, including illustrations and icon sets, as
|
|
* well as technical writing content are licensed under the terms of the
|
|
* Creative Commons Attribution-ShareAlike 4.0 International. See the License
|
|
* terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
|
*
|
|
*/
|
|
|
|
"use strict";
|
|
|
|
(function (window, undefined) {
|
|
var InitClass = AscFormat.InitClass;
|
|
var CAnimTexture = AscFormat.CAnimTexture;
|
|
|
|
|
|
const STATE_FLAG_SELECTED = 1;
|
|
const STATE_FLAG_HOVERED = 2;
|
|
const STATE_FLAG_PRESSED = 4;
|
|
const STATE_FLAG_DISABLED = 8;
|
|
|
|
const CONTROL_TYPE_UNKNOWN = 0;
|
|
const CONTROL_TYPE_LABEL = 1;
|
|
const CONTROL_TYPE_IMAGE = 2;
|
|
const CONTROL_TYPE_BUTTON = 3;
|
|
const CONTROL_TYPE_HEADER = 4;
|
|
const CONTROL_TYPE_SCROLL_VERT = 5;
|
|
const CONTROL_TYPE_SCROLL_HOR = 6;
|
|
const CONTROL_TYPE_TIMELINE_CONTAINER = 7;
|
|
const CONTROL_TYPE_TIMELINE = 8;
|
|
const CONTROL_TYPE_SEQ_LIST_CONTAINER = 9;
|
|
const CONTROL_TYPE_SEQ_LIST = 10;
|
|
const CONTROL_TYPE_ANIM_SEQ = 11;
|
|
const CONTROL_TYPE_ANIM_GROUP_LIST = 12;
|
|
const CONTROL_TYPE_ANIM_GROUP = 13;
|
|
const CONTROL_TYPE_ANIM_ITEM = 14;
|
|
const CONTROL_TYPE_EFFECT_BAR = 15;
|
|
|
|
|
|
function CControl(oParentControl) {
|
|
AscFormat.ExecuteNoHistory(function () {
|
|
AscFormat.CShape.call(this);
|
|
this.setRecalculateInfo();
|
|
this.setBDeleted(false);
|
|
this.setLayout(0, 0, 0, 0);
|
|
}, this, []);
|
|
|
|
this.parent = editor.WordControl.m_oLogicDocument.Slides[0];
|
|
this.parentControl = oParentControl;
|
|
this.state = 0;
|
|
this.hidden = false;
|
|
this.previous = null;
|
|
this.next = null;
|
|
}
|
|
|
|
InitClass(CControl, AscFormat.CShape, CONTROL_TYPE_UNKNOWN);
|
|
CControl.prototype.getSeqList = function () {
|
|
let oParentControl = this.parentControl;
|
|
while (oParentControl) {
|
|
if (oParentControl instanceof CSeqList) {
|
|
return oParentControl;
|
|
}
|
|
oParentControl = oParentControl.parentControl;
|
|
}
|
|
return null;
|
|
};
|
|
CControl.prototype.DEFALT_WRAP_OBJECT = {
|
|
oTxWarpStruct: null,
|
|
oTxWarpStructParamarks: null,
|
|
oTxWarpStructNoTransform: null,
|
|
oTxWarpStructParamarksNoTransform: null
|
|
};
|
|
CControl.prototype.setHidden = function (bVal) {
|
|
if (this.hidden !== bVal) {
|
|
this.hidden = bVal;
|
|
this.onUpdate();
|
|
}
|
|
};
|
|
CControl.prototype.show = function () {
|
|
this.setHidden(false);
|
|
};
|
|
CControl.prototype.hide = function () {
|
|
this.setHidden(true);
|
|
};
|
|
CControl.prototype.isHidden = function () {
|
|
return this.hidden;
|
|
};
|
|
CControl.prototype.notAllowedWithoutId = function () {
|
|
return false;
|
|
};
|
|
//define shape methods
|
|
CControl.prototype.getBodyPr = function () {
|
|
return this.bodyPr;
|
|
};
|
|
CControl.prototype.getScrollOffsetX = function (oChild) {
|
|
return 0;
|
|
};
|
|
CControl.prototype.getScrollOffsetY = function (oChild) {
|
|
return 0;
|
|
};
|
|
CControl.prototype.getParentScrollOffsetX = function (oChild) {
|
|
if (this.parentControl) {
|
|
return this.parentControl.getScrollOffsetX(oChild);
|
|
}
|
|
return 0;
|
|
};
|
|
CControl.prototype.getParentScrollOffsetY = function (oChild) {
|
|
if (this.parentControl) {
|
|
return this.parentControl.getScrollOffsetY(oChild);
|
|
}
|
|
return 0;
|
|
};
|
|
CControl.prototype.getFullTransformMatrix = function () {
|
|
return this.transform;
|
|
};
|
|
CControl.prototype.getInvFullTransformMatrix = function () {
|
|
return this.invertTransform;
|
|
};
|
|
CControl.prototype.multiplyParentTransforms = function (oLocalTransform) {
|
|
var oMT = AscCommon.global_MatrixTransformer;
|
|
var oTransform = oMT.CreateDublicateM(oLocalTransform);
|
|
var oScrollMatrix = new AscCommon.CMatrix();
|
|
oScrollMatrix.tx = this.getParentScrollOffsetX(this);
|
|
oScrollMatrix.ty = this.getParentScrollOffsetY(this);
|
|
oMT.MultiplyAppend(oTransform, oScrollMatrix);
|
|
var oParentTransform = this.parentControl && this.parentControl.getFullTransformMatrix();
|
|
oParentTransform && oMT.MultiplyAppend(oTransform, oParentTransform);
|
|
return oTransform;
|
|
};
|
|
CControl.prototype.getFullTransform = function () {
|
|
return this.transform;
|
|
};
|
|
CControl.prototype.getFullTextTransform = function () {
|
|
return this.transformText;
|
|
};
|
|
CControl.prototype.recalculate = function () {
|
|
AscFormat.CShape.prototype.recalculate.call(this);
|
|
};
|
|
CControl.prototype.recalculateBrush = function () {
|
|
this.brush = null;
|
|
};
|
|
CControl.prototype.recalculatePen = function () {
|
|
this.pen = null;
|
|
};
|
|
CControl.prototype.recalculateContent = function () {
|
|
};
|
|
CControl.prototype.recalculateGeometry = function () {
|
|
//this.calcGeometry = AscFormat.CreateGeometry("rect");
|
|
//this.calcGeometry.Recalculate(this.extX, this.extY);
|
|
};
|
|
CControl.prototype.recalculateTransform = function () {
|
|
if (!this.transform) {
|
|
this.transform = new AscCommon.CMatrix();
|
|
}
|
|
var tx = this.getLeft();
|
|
var ty = this.getTop();
|
|
this.x = tx;
|
|
this.y = ty;
|
|
this.rot = 0;
|
|
this.extX = this.getWidth();
|
|
this.extY = this.getHeight();
|
|
this.flipH = false;
|
|
this.flipV = false;
|
|
ty += this.getParentScrollOffsetY(this);
|
|
var oCurParent = this.parentControl;
|
|
|
|
if (oCurParent) {
|
|
tx += oCurParent.transform.tx;
|
|
ty += oCurParent.transform.ty
|
|
}
|
|
this.transform.tx = tx;
|
|
this.transform.ty = ty;
|
|
if (!this.invertTransform) {
|
|
this.invertTransform = new AscCommon.CMatrix();
|
|
}
|
|
this.invertTransform.tx = -tx;
|
|
this.invertTransform.ty = -ty;
|
|
this.localTransform = this.transform;
|
|
};
|
|
CControl.prototype.recalculateTransformText = function () {
|
|
if (!this.transformText) {
|
|
this.transformText = new AscCommon.CMatrix();
|
|
}
|
|
this.transformText.tx = this.transform.tx;
|
|
this.transformText.ty = this.transform.ty;
|
|
|
|
if (!this.invertTransformText) {
|
|
this.invertTransformText = new AscCommon.CMatrix();
|
|
}
|
|
this.invertTransformText.tx = -this.transform.tx;
|
|
this.invertTransformText.ty = -this.transform.ty;
|
|
this.localTransformText = this.transformText;
|
|
};
|
|
CControl.prototype.recalculateBounds = function () {
|
|
var dX = this.transform.tx;
|
|
var dY = this.transform.ty;
|
|
this.bounds.reset(dX, dY, dX + this.getWidth(), dY + this.getHeight())
|
|
};
|
|
CControl.prototype.recalculateSnapArrays = function () {
|
|
};
|
|
CControl.prototype.checkAutofit = function (bIgnoreWordShape) {
|
|
return false;
|
|
};
|
|
CControl.prototype.checkTextWarp = function (oContent, oBodyPr, dWidth, dHeight, bNeedNoTransform, bNeedWarp) {
|
|
return this.DEFALT_WRAP_OBJECT;
|
|
};
|
|
CControl.prototype.addToRecalculate = function () {
|
|
};
|
|
CControl.prototype.canHandleEvents = function () {
|
|
return true;
|
|
};
|
|
CControl.prototype.getPenWidth = function (graphics) {
|
|
var fScale = graphics.m_oCoordTransform.sx;
|
|
var nPenW = AscCommon.AscBrowser.convertToRetinaValue(1, true) / fScale;
|
|
return nPenW;
|
|
};
|
|
CControl.prototype.draw = function (graphics) {
|
|
if (this.isHidden()) { return false; }
|
|
if (!this.checkUpdateRect(graphics.updatedRect)) { return false; }
|
|
|
|
this.recalculateTransform();
|
|
this.recalculateTransformText();
|
|
|
|
const sFillColor = this.getFillColor();
|
|
const sOutlineColor = this.getOutlineColor();
|
|
let oColor;
|
|
if (sOutlineColor || sFillColor) {
|
|
graphics.SaveGrState();
|
|
graphics.transform3(this.transform);
|
|
var x = 0;
|
|
var y = 0;
|
|
var extX = this.getWidth();
|
|
var extY = this.getHeight();
|
|
if (sFillColor) {
|
|
oColor = AscCommon.RgbaHexToRGBA(sFillColor);
|
|
graphics.b_color1(oColor.R, oColor.G, oColor.B, 0xFF);
|
|
graphics.rect(x, y, extX, extY);
|
|
graphics.df();
|
|
}
|
|
if (sOutlineColor) {
|
|
oColor = AscCommon.RgbaHexToRGBA(sOutlineColor);
|
|
graphics.SetIntegerGrid(true);
|
|
|
|
var nPenW = this.getPenWidth(graphics);
|
|
//graphics.p_width(100);//AscCommon.AscBrowser.convertToRetinaValue(1, true);
|
|
graphics.p_color(oColor.R, oColor.G, oColor.B, 0xFF);
|
|
graphics.drawHorLine(0, y, x, x + extX, nPenW);
|
|
graphics.drawHorLine(0, y + extY, x, x + extX, nPenW);
|
|
graphics.drawVerLine(2, x, y, y + extY, nPenW);
|
|
graphics.drawVerLine(2, x + extX, y, y + extY, nPenW);
|
|
graphics.ds();
|
|
}
|
|
graphics.RestoreGrState();
|
|
}
|
|
AscFormat.CShape.prototype.draw.call(this, graphics);
|
|
return true;
|
|
};
|
|
CControl.prototype.hit = function (x, y) {
|
|
if (this.parentControl && !this.parentControl.hit(x, y)) {
|
|
return false;
|
|
}
|
|
var oInv = this.invertTransform;
|
|
var tx = oInv.TransformPointX(x, y);
|
|
var ty = oInv.TransformPointY(x, y);
|
|
return tx >= 0 && tx <= this.extX && ty >= 0 && ty <= this.extY;
|
|
};
|
|
CControl.prototype.setStateFlag = function (nFlag, bValue) {
|
|
var nOldState = this.state;
|
|
if (bValue) {
|
|
this.state |= nFlag;
|
|
} else {
|
|
this.state &= (~nFlag);
|
|
}
|
|
if (nOldState !== this.state) {
|
|
this.onUpdate();
|
|
}
|
|
};
|
|
CControl.prototype.getStateFlag = function (nFlag) {
|
|
return (this.state & nFlag) !== 0;
|
|
};
|
|
CControl.prototype.isHovered = function () {
|
|
return this.getStateFlag(STATE_FLAG_HOVERED);
|
|
};
|
|
CControl.prototype.isActive = function () {
|
|
if (this.parentControl) {
|
|
if (!this.eventListener && this.parentControl.isEventListener(this)) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
};
|
|
CControl.prototype.setHoverState = function () {
|
|
this.setStateFlag(STATE_FLAG_HOVERED, true);
|
|
};
|
|
CControl.prototype.setNotHoverState = function () {
|
|
this.setStateFlag(STATE_FLAG_HOVERED, false);
|
|
};
|
|
CControl.prototype.onMouseMove = function (e, x, y) {
|
|
if (e.IsLocked) {
|
|
return false;
|
|
}
|
|
if (!this.canHandleEvents()) {
|
|
return false;
|
|
}
|
|
const bHover = !!this.hit(x, y);
|
|
const bHoverChanged = bHover !== this.isHovered();
|
|
if(bHoverChanged) {
|
|
this.setStateFlag(STATE_FLAG_HOVERED, bHover);
|
|
}
|
|
return false;
|
|
};
|
|
CControl.prototype.onMouseDown = function (e, x, y) {
|
|
if (!this.canHandleEvents()) {
|
|
return false;
|
|
}
|
|
if (this.hit(x, y)) {
|
|
if (this.parentControl) {
|
|
this.parentControl.setEventListener(this);
|
|
}
|
|
return true;
|
|
}
|
|
return false;
|
|
};
|
|
CControl.prototype.onMouseUp = function (e, x, y) {
|
|
if (this.parentControl) {
|
|
if (this.parentControl.isEventListener(this)) {
|
|
this.parentControl.setEventListener(null);
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
};
|
|
CControl.prototype.onMouseWheel = function (e, deltaY, X, Y) {
|
|
return false;
|
|
};
|
|
CControl.prototype.onUpdate = function () {
|
|
if (this.parentControl) {
|
|
var oBounds = this.getBounds();
|
|
this.parentControl.onChildUpdate(oBounds);
|
|
}
|
|
};
|
|
CControl.prototype.onChildUpdate = function (oBounds) {
|
|
if (this.parentControl) {
|
|
this.parentControl.onChildUpdate(oBounds);
|
|
}
|
|
};
|
|
CControl.prototype.checkUpdateRect = function (oUpdateRect) {
|
|
var oBounds = this.getBounds();
|
|
if (oUpdateRect && oBounds) {
|
|
if (!oUpdateRect.isIntersectOther(oBounds)) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
};
|
|
CControl.prototype.recalculate = function () {
|
|
AscFormat.CShape.prototype.recalculate.call(this);
|
|
};
|
|
/**
|
|
* Sets the location and dimensions of the control inside the parent container.
|
|
*
|
|
* @param {number} dX - Offset of the element along the X axis relative to the upper-left corner of the parent container.
|
|
* @param {number} dY - Offset of the element along the Y axis relative to the upper-left corner of the parent container.
|
|
* @param {number} dExtX - Width of the element.
|
|
* @param {number} dExtY - Height of the element.
|
|
*
|
|
* @note
|
|
* - Negative values for dX and dY are supported with behavior similar to "overflow: hidden" in CSS.
|
|
* - Negative values for dExtX and dExtY are not supported and may lead to unexpected behavior.
|
|
* - It is recommended to avoid using negative values for dExtX and dExtY to ensure proper rendering and hit detection.
|
|
*/
|
|
CControl.prototype.setLayout = function (dX, dY, dExtX, dExtY) {
|
|
if (!this.spPr) {
|
|
this.spPr = new AscFormat.CSpPr();
|
|
}
|
|
if (!this.spPr.xfrm) {
|
|
this.spPr.xfrm = new AscFormat.CXfrm();
|
|
}
|
|
|
|
this.spPr.xfrm.offX = dX;
|
|
this.spPr.xfrm.offY = dY;
|
|
this.spPr.xfrm.extX = dExtX;
|
|
this.spPr.xfrm.extY = dExtY;
|
|
this.handleUpdateExtents();
|
|
};
|
|
CControl.prototype.getLeft = function () {
|
|
return this.spPr.xfrm.offX;
|
|
};
|
|
CControl.prototype.getTop = function () {
|
|
return this.spPr.xfrm.offY;
|
|
};
|
|
CControl.prototype.getRight = function () {
|
|
return this.spPr.xfrm.offX + this.spPr.xfrm.extX;
|
|
};
|
|
CControl.prototype.getBottom = function () {
|
|
return this.spPr.xfrm.offY + this.spPr.xfrm.extY;
|
|
};
|
|
CControl.prototype.getWidth = function () {
|
|
return this.spPr.xfrm.extX;
|
|
};
|
|
CControl.prototype.getHeight = function () {
|
|
return this.spPr.xfrm.extY;
|
|
};
|
|
CControl.prototype.getBounds = function () {
|
|
return AscFormat.ExecuteNoHistory(function () {
|
|
this.recalculateBounds();
|
|
this.recalculateTransform();
|
|
this.recalculateTransformText();
|
|
return this.bounds;
|
|
}, this, []);
|
|
};
|
|
CControl.prototype.convertRelToAbs = function (oPos) {
|
|
var oAbsPos = { x: oPos.x, y: oPos.y };
|
|
var oParent = this;
|
|
while (oParent) {
|
|
oAbsPos.x += oParent.getLeft();
|
|
oAbsPos.y += oParent.getTop();
|
|
oParent = oParent.parentControl;
|
|
}
|
|
return oAbsPos;
|
|
};
|
|
CControl.prototype.convertAbsToRel = function (oPos) {
|
|
var oRelPos = { x: oPos.x, y: oPos.y };
|
|
var oParent = this;
|
|
while (oParent) {
|
|
oRelPos.x -= oParent.getLeft();
|
|
oRelPos.y -= oParent.getTop();
|
|
oParent = oParent.parentControl;
|
|
}
|
|
return oRelPos;
|
|
};
|
|
CControl.prototype.getNext = function () {
|
|
return this.next;
|
|
};
|
|
CControl.prototype.getPrevious = function () {
|
|
return this.previous;
|
|
};
|
|
CControl.prototype.setNext = function (v) {
|
|
this.next = v;
|
|
};
|
|
CControl.prototype.setPrevious = function (v) {
|
|
this.previous = v;
|
|
};
|
|
CControl.prototype.setParentControl = function (v) {
|
|
this.parentControl = v;
|
|
};
|
|
CControl.prototype.getTiming = function () {
|
|
var oSlide = this.getSlide();
|
|
if (oSlide) {
|
|
return oSlide.timing;
|
|
}
|
|
return null;
|
|
};
|
|
CControl.prototype.getSlide = function () {
|
|
var oSlide = null;
|
|
if (editor.WordControl && editor.WordControl.m_oLogicDocument) {
|
|
oSlide = editor.WordControl.m_oLogicDocument.GetCurrentSlide();
|
|
return oSlide;
|
|
}
|
|
return null;
|
|
};
|
|
CControl.prototype.getSlideNum = function () {
|
|
var oSlide = this.getSlide();
|
|
if (oSlide) {
|
|
return oSlide.num;
|
|
}
|
|
return -1;
|
|
};
|
|
CControl.prototype.getFillColor = function () {
|
|
console.error('Method "getFillColor" must be implemented in ' + this.constructor.name);
|
|
return null;
|
|
};
|
|
CControl.prototype.getOutlineColor = function () {
|
|
console.error('Method "getOutlineColor" must be implemented in ' + this.constructor.name);
|
|
return null;
|
|
};
|
|
CControl.prototype.drawShdw = function () {
|
|
|
|
};
|
|
|
|
|
|
function CControlContainer(oParentControl) {
|
|
CControl.call(this, oParentControl);
|
|
this.children = [];
|
|
this.recalcInfo.recalculateChildrenLayout = true;
|
|
this.recalcInfo.recalculateChildren = true;
|
|
|
|
this.eventListener = null;
|
|
}
|
|
|
|
InitClass(CControlContainer, CControl, CONTROL_TYPE_UNKNOWN);
|
|
|
|
CControlContainer.prototype.isEventListener = function (oChild) {
|
|
return this.eventListener === oChild;
|
|
};
|
|
CControlContainer.prototype.onScroll = function () {
|
|
};
|
|
CControlContainer.prototype.onStartScroll = function () {
|
|
};
|
|
CControlContainer.prototype.onEndScroll = function () {
|
|
};
|
|
CControlContainer.prototype.clear = function () {
|
|
for (var nIdx = this.children.length - 1; nIdx > -1; --nIdx) {
|
|
this.removeControl(this.children[nIdx]);
|
|
}
|
|
};
|
|
CControlContainer.prototype.addControl = function (oChild) {
|
|
var oLast = this.children[this.children.length - 1];
|
|
this.children.push(oChild);
|
|
if (oLast) {
|
|
oLast.setNext(oChild);
|
|
oChild.setPrevious(oLast);
|
|
oChild.setParentControl(this);
|
|
}
|
|
return oChild;
|
|
};
|
|
CControlContainer.prototype.removeControl = function (oChild) {
|
|
var nIdx = this.getChildIdx(oChild);
|
|
this.removeByIdx(nIdx);
|
|
};
|
|
CControlContainer.prototype.removeByIdx = function (nIdx) {
|
|
if (nIdx > -1 && nIdx < this.children.length) {
|
|
var oChild = this.children[nIdx];
|
|
oChild.setNext(null);
|
|
oChild.setPrevious(null);
|
|
oChild.setParentControl(null);
|
|
var oPrev = this.children[nIdx - 1] || null;
|
|
var oNext = this.children[nIdx + 1] || null;
|
|
if (oPrev) {
|
|
oPrev.setNext(oNext);
|
|
}
|
|
if (oNext) {
|
|
oNext.setPrevious(oPrev);
|
|
}
|
|
this.children.splice(nIdx, 1);
|
|
}
|
|
};
|
|
CControlContainer.prototype.getChildIdx = function (oChild) {
|
|
for (var nChild = 0; nChild < this.children.length; ++nChild) {
|
|
if (this.children[nChild] === oChild) {
|
|
return nChild;
|
|
}
|
|
}
|
|
return -1;
|
|
};
|
|
CControlContainer.prototype.getChildByType = function (nType) {
|
|
for (var nChild = 0; nChild < this.children.length; ++nChild) {
|
|
var oChild = this.children[nChild];
|
|
if (oChild.getObjectType() === nType) {
|
|
return oChild;
|
|
}
|
|
}
|
|
return null;
|
|
};
|
|
CControlContainer.prototype.getChild = function (nIdx) {
|
|
if (nIdx > -1 && nIdx < this.children.length) {
|
|
return this.children[nIdx];
|
|
}
|
|
};
|
|
CControlContainer.prototype.draw = function (graphics) {
|
|
if (!CControl.prototype.draw.call(this, graphics)) {
|
|
return false;
|
|
}
|
|
this.clipStart(graphics);
|
|
for (var nChild = 0; nChild < this.children.length; ++nChild) {
|
|
this.children[nChild].draw(graphics);
|
|
}
|
|
this.clipEnd(graphics);
|
|
return true;
|
|
};
|
|
CControlContainer.prototype.clipStart = function (graphics) {
|
|
};
|
|
CControlContainer.prototype.clipEnd = function (graphics) {
|
|
};
|
|
CControlContainer.prototype.recalculateChildrenLayout = function () {
|
|
};
|
|
CControlContainer.prototype.recalculateChildren = function () {
|
|
};
|
|
CControlContainer.prototype.recalculate = function () {
|
|
AscFormat.ExecuteNoHistory(function () {
|
|
CControl.prototype.recalculate.call(this);
|
|
if (this.recalcInfo.recalculateChildren) {
|
|
this.recalculateChildren();
|
|
this.recalcInfo.recalculateChildren = false;
|
|
}
|
|
if (this.recalcInfo.recalculateChildrenLayout) {
|
|
this.recalculateChildrenLayout();
|
|
this.recalcInfo.recalculateChildrenLayout = false;
|
|
}
|
|
for (var nChild = 0; nChild < this.children.length; ++nChild) {
|
|
this.children[nChild].recalculate();
|
|
}
|
|
}, this, []);
|
|
};
|
|
CControlContainer.prototype.setLayout = function (dX, dY, dExtX, dExtY) {
|
|
AscFormat.ExecuteNoHistory(function () {
|
|
CControl.prototype.setLayout.call(this, dX, dY, dExtX, dExtY);
|
|
this.recalcInfo.recalculateChildrenLayout = true;
|
|
}, this, []);
|
|
};
|
|
CControlContainer.prototype.handleUpdateExtents = function () {
|
|
this.recalcInfo.recalculateChildrenLayout = true;
|
|
CControl.prototype.handleUpdateExtents.call(this);
|
|
};
|
|
CControlContainer.prototype.setEventListener = function (oChild) {
|
|
if (oChild) {
|
|
this.eventListener = oChild;
|
|
if (this.parentControl) {
|
|
this.parentControl.setEventListener(this);
|
|
}
|
|
} else {
|
|
this.eventListener = null;
|
|
if (this.parentControl) {
|
|
this.parentControl.setEventListener(null);
|
|
}
|
|
}
|
|
};
|
|
CControlContainer.prototype.onMouseDown = function (e, x, y) {
|
|
for (var nChild = this.children.length - 1; nChild >= 0; --nChild) {
|
|
if (this.children[nChild].onMouseDown(e, x, y)) {
|
|
return true;
|
|
}
|
|
}
|
|
return CControl.prototype.onMouseDown.call(this, e, x, y);
|
|
};
|
|
CControlContainer.prototype.onMouseMove = function (e, x, y) {
|
|
for (var nChild = this.children.length - 1; nChild >= 0; --nChild) {
|
|
if (this.children[nChild].onMouseMove(e, x, y)) {
|
|
return true;
|
|
}
|
|
}
|
|
return CControl.prototype.onMouseMove.call(this, e, x, y);
|
|
};
|
|
CControlContainer.prototype.onMouseUp = function (e, x, y) {
|
|
for (var nChild = this.children.length - 1; nChild >= 0; --nChild) {
|
|
if (this.children[nChild].onMouseUp(e, x, y)) {
|
|
return true;
|
|
}
|
|
}
|
|
return CControl.prototype.onMouseUp.call(this, e, x, y);
|
|
};
|
|
CControlContainer.prototype.onMouseWheel = function (e, deltaY, X, Y) {
|
|
for (var nChild = 0; nChild < this.children.length; ++nChild) {
|
|
if (this.children[nChild].onMouseWheel(e, deltaY, X, Y)) {
|
|
return true;
|
|
}
|
|
}
|
|
return CControl.prototype.onMouseWheel.call(this, e, deltaY, X, Y);
|
|
};
|
|
CControlContainer.prototype.isScrolling = function () {
|
|
for (var nChild = 0; nChild < this.children.length; ++nChild) {
|
|
var oChild = this.children[nChild];
|
|
if (oChild.isOnScroll && oChild.isOnScroll()) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
};
|
|
CControlContainer.prototype.canHandleEvents = function () {
|
|
return false;
|
|
};
|
|
CControlContainer.prototype.onResize = function () {
|
|
this.handleUpdateExtents();
|
|
this.recalculate();
|
|
};
|
|
CControlContainer.prototype.getFillColor = function () {
|
|
return null;
|
|
};
|
|
CControlContainer.prototype.getOutlineColor = function () {
|
|
return null;
|
|
};
|
|
|
|
|
|
function CTopControl(oDrawer) {
|
|
CControlContainer.call(this, null);
|
|
this.drawer = oDrawer;
|
|
}
|
|
|
|
InitClass(CTopControl, CControlContainer, CONTROL_TYPE_UNKNOWN);
|
|
|
|
CTopControl.prototype.onUpdateRect = function (oBounds) {
|
|
if (this.drawer) {
|
|
this.drawer.OnAnimPaneChanged(oBounds);
|
|
}
|
|
};
|
|
CTopControl.prototype.onUpdate = function () {
|
|
var oBounds = this.getBounds();
|
|
this.onUpdateRect(oBounds);
|
|
};
|
|
CTopControl.prototype.onChildUpdate = function (oBounds) {
|
|
this.onUpdateRect(oBounds);
|
|
};
|
|
CTopControl.prototype.onResize = function () {
|
|
this.setLayout(0, 0, this.drawer.GetWidth(), this.drawer.GetHeight());
|
|
CControlContainer.prototype.onResize.call(this);
|
|
this.onUpdate();
|
|
};
|
|
|
|
|
|
function CLabel(oParentControl, sString, nFontSize, bBold, nParaAlign) {
|
|
CControl.call(this, oParentControl);
|
|
this.fontSize = nFontSize;
|
|
this.bold = bBold;
|
|
this.paraAlign = nParaAlign;
|
|
|
|
AscFormat.ExecuteNoHistory(function () {
|
|
const oRGB = AscCommon.RgbaHexToRGBA(AscCommon.GlobalSkin.AnimPaneText);
|
|
const oColor = new AscCommonWord.CDocumentColor(oRGB.R, oRGB.G, oRGB.B, false);
|
|
|
|
var oTxLstStyle = new AscFormat.TextListStyle();
|
|
oTxLstStyle.levels[0] = new CParaPr();
|
|
oTxLstStyle.levels[0].DefaultRunPr = new AscCommonWord.CTextPr();
|
|
oTxLstStyle.levels[0].DefaultRunPr.FontSize = this.fontSize;
|
|
oTxLstStyle.levels[0].DefaultRunPr.Bold = this.bold;
|
|
oTxLstStyle.levels[0].DefaultRunPr.Color = oColor;
|
|
oTxLstStyle.levels[0].DefaultRunPr.RFonts.SetAll("Arial", -1);
|
|
if (AscFormat.isRealNumber(this.paraAlign)) oTxLstStyle.levels[0].Jc = this.paraAlign;
|
|
|
|
this.createTextBody();
|
|
this.txBody.setLstStyle(oTxLstStyle);
|
|
|
|
this.bodyPr = new AscFormat.CBodyPr();
|
|
this.bodyPr.setDefault();
|
|
this.bodyPr.anchor = 1; //vertical align ctr
|
|
this.bodyPr.resetInsets();
|
|
this.bodyPr.horzOverflow = AscFormat.nHOTClip;
|
|
this.bodyPr.vertOverflow = AscFormat.nVOTClip;
|
|
this.cachedMaxWidth = 0;
|
|
this.setString(sString);
|
|
}, this, []);
|
|
}
|
|
|
|
InitClass(CLabel, CControl, CONTROL_TYPE_LABEL);
|
|
|
|
CLabel.prototype.getString = function () {
|
|
return AscCommon.translateManager.getValue(this.string);
|
|
};
|
|
CLabel.prototype.recalculateContent = function () {
|
|
this.txBody.content.Recalc_AllParagraphs_CompiledPr();
|
|
const oRGB = AscCommon.RgbaHexToRGBA(AscCommon.GlobalSkin.AnimPaneText);
|
|
const oColor = new AscCommonWord.CDocumentColor(oRGB.R, oRGB.G, oRGB.B, false);
|
|
this.txBody.lstStyle.levels[0].DefaultRunPr.Color = oColor;
|
|
|
|
if (!this.txBody.bFit || !AscFormat.isRealNumber(this.txBody.fitWidth) || this.txBody.fitWidth > this.getWidth()) {
|
|
this.txBody.recalculateOneString(this.getString());
|
|
}
|
|
|
|
// this.recalculateGeometry();
|
|
this.recalculateTransform();
|
|
};
|
|
CLabel.prototype.setString = function(str) {
|
|
this.string = str;
|
|
this.initStringContent();
|
|
};
|
|
CLabel.prototype.initStringContent = function() {
|
|
AscFormat.ExecuteNoHistory(function () {
|
|
this.txBody.checkContentFit(this.getString());
|
|
this.cachedMaxWidth = this.txBody.content.RecalculateMinMaxContentWidth().Max;
|
|
}, this, []);
|
|
};
|
|
CLabel.prototype.canHandleEvents = function () {
|
|
return false;
|
|
};
|
|
CLabel.prototype.getFillColor = function () {
|
|
return null;
|
|
};
|
|
CLabel.prototype.getOutlineColor = function () {
|
|
return null;
|
|
};
|
|
CLabel.prototype.recalculateTransformText = function () {
|
|
var Y = this.getHeight() / 2 - this.txBody.content.GetSummaryHeight() / 2;
|
|
if (!this.transformText) {
|
|
this.transformText = new AscCommon.CMatrix();
|
|
}
|
|
this.transformText.tx = this.transform.tx;
|
|
this.transformText.ty = this.transform.ty + Y;
|
|
|
|
if (!this.invertTransformText) {
|
|
this.invertTransformText = new AscCommon.CMatrix();
|
|
}
|
|
this.invertTransformText.tx = -this.transformText.tx;
|
|
this.invertTransformText.ty = -this.transformText.ty;
|
|
this.localTransformText = this.transformText;
|
|
};
|
|
CLabel.prototype.recalculateTransformText2 = function () {
|
|
return null;
|
|
};
|
|
|
|
CLabel.prototype.getContentOneStringSizes = function () {
|
|
return AscFormat.ExecuteNoHistory(function () {
|
|
this.recalculateContent();
|
|
return this.txBody.getContentOneStringSizes();
|
|
}, this, []);
|
|
};
|
|
|
|
CLabel.prototype.setLayout = function (dX, dY, dExtX, dExtY) {
|
|
this.superclass.prototype.setLayout.call(this, dX, dY, dExtX, dExtY);
|
|
if(this.txBody) {
|
|
this.txBody.bFit = false;
|
|
}
|
|
};
|
|
|
|
|
|
function CImageControl(oParentControl, sBase64Image, width, height) {
|
|
CControl.call(this, oParentControl)
|
|
this.src = sBase64Image;
|
|
this.imgWidth = width || 0;
|
|
this.imgHeight = height || 0;
|
|
}
|
|
|
|
InitClass(CImageControl, CControl, CONTROL_TYPE_IMAGE);
|
|
|
|
CImageControl.prototype.canHandleEvents = function () {
|
|
return false;
|
|
};
|
|
CImageControl.prototype.draw = function(graphics) {
|
|
if (!this.src) { return false; }
|
|
if (this.isHidden()) { return false; }
|
|
if (!this.checkUpdateRect(graphics.updatedRect)) { return false; }
|
|
|
|
const left = this.bounds.l + (this.getWidth() - this.imgWidth) / 2;
|
|
const top = this.bounds.t + (this.getHeight() - this.imgHeight) / 2;
|
|
|
|
graphics.SaveGrState();
|
|
graphics.SetIntegerGrid(false);
|
|
graphics.drawImage(this.src, left, top, this.imgWidth, this.imgHeight);
|
|
graphics.RestoreGrState();
|
|
};
|
|
CImageControl.prototype.getFillColor = function () {
|
|
return null;
|
|
};
|
|
CImageControl.prototype.getOutlineColor = function () {
|
|
return null;
|
|
};
|
|
|
|
|
|
function CButton(oParentControl, fOnMouseDown, fOnMouseMove, fOnMouseUp) {
|
|
CControlContainer.call(this, oParentControl);
|
|
this.onMouseDownCallback = fOnMouseDown;
|
|
this.onMouseMoveCallback = fOnMouseMove;
|
|
this.onMouseUpCallback = fOnMouseUp;
|
|
}
|
|
|
|
InitClass(CButton, CControlContainer, CONTROL_TYPE_BUTTON);
|
|
|
|
CButton.prototype.onMouseDown = function (e, x, y) {
|
|
if (this.onMouseDownCallback && this.onMouseDownCallback.call(this, e, x, y)) {
|
|
return true;
|
|
}
|
|
return CControlContainer.prototype.onMouseDown.call(this, e, x, y);
|
|
};
|
|
CButton.prototype.onMouseMove = function (e, x, y) {
|
|
if (this.onMouseMoveCallback && this.onMouseMoveCallback.call(this, e, x, y)) {
|
|
return true;
|
|
}
|
|
return CControlContainer.prototype.onMouseMove.call(this, e, x, y);
|
|
};
|
|
CButton.prototype.onMouseUp = function (e, x, y) {
|
|
if (this.onMouseUpCallback && this.onMouseUpCallback.call(this, e, x, y)) {
|
|
return true;
|
|
}
|
|
return CControlContainer.prototype.onMouseUp.call(this, e, x, y);
|
|
};
|
|
CButton.prototype.canHandleEvents = function () {
|
|
return true;
|
|
};
|
|
|
|
CButton.prototype.draw = function (graphics) {
|
|
if (!CControl.prototype.draw.call(this, graphics)) { return false; }
|
|
|
|
const contentOpacity = this.getContentOpacity();
|
|
graphics.put_GlobalAlpha(true, contentOpacity);
|
|
for (var nChild = 0; nChild < this.children.length; ++nChild) {
|
|
this.children[nChild].draw(graphics);
|
|
}
|
|
graphics.put_GlobalAlpha(false);
|
|
|
|
return true;
|
|
};
|
|
|
|
CButton.prototype.getContentOpacity = function () {
|
|
if (this.isDisabled()) { return 0.6 }
|
|
return 1;
|
|
}
|
|
CButton.prototype.getFillColor = function () {
|
|
const oSkin = AscCommon.GlobalSkin;
|
|
if (this.isDisabled()) { return null; }
|
|
if (this.isHovered()) { return oSkin.AnimPaneButtonFillHovered; }
|
|
if (this.sName === 'playButton') { return oSkin.type === 'light' ? oSkin.AnimPanePlayButtonFill : null; }
|
|
return null;
|
|
};
|
|
CButton.prototype.getOutlineColor = function () {
|
|
if (this.sName === 'playButton') { return AscCommon.GlobalSkin.AnimPanePlayButtonOutline; }
|
|
return null;
|
|
};
|
|
CButton.prototype.isPressed = function () {
|
|
return this.getStateFlag(STATE_FLAG_PRESSED);
|
|
};
|
|
CButton.prototype.disable = function () {
|
|
return this.setStateFlag(STATE_FLAG_DISABLED, true)
|
|
};
|
|
CButton.prototype.enable = function () {
|
|
return this.setStateFlag(STATE_FLAG_DISABLED, false)
|
|
};
|
|
CButton.prototype.isDisabled = function () {
|
|
return this.getStateFlag(STATE_FLAG_DISABLED);
|
|
};
|
|
|
|
|
|
function CAnimPaneHeader(oDrawer) {
|
|
CTopControl.call(this, oDrawer);
|
|
this.label = this.addControl(new CLabel(this, 'Animation Pane', HEADER_LABEL_FONTSIZE, true, AscCommon.align_Left));
|
|
|
|
this.playButton = this.addControl(new CButton(this, null, null, managePreview));
|
|
this.playButton.sName = 'playButton';
|
|
this.playButton.icon = this.playButton.addControl(new CImageControl(
|
|
this.playButton, null,
|
|
10 * AscCommon.g_dKoef_pix_to_mm, 10 * AscCommon.g_dKoef_pix_to_mm /* 10x10 svg icon (play and stop icons both) */
|
|
));
|
|
this.playButton.label = this.playButton.addControl(new CLabel(this.playButton, '', PLAY_BUTTON_LABEL_FONTSIZE));
|
|
|
|
this.moveUpButton = this.addControl(new CButton(this, null, null, moveChosenUp));
|
|
this.moveUpButton.icon = this.moveUpButton.addControl(new CImageControl(
|
|
this.moveUpButton,
|
|
AscCommon.GlobalSkin.type == 'light' ? arrowUpIcon_dark : arrowUpIcon_light,
|
|
12 * AscCommon.g_dKoef_pix_to_mm, 7 * AscCommon.g_dKoef_pix_to_mm /* 12x7 svg icon*/
|
|
));
|
|
|
|
this.moveDownButton = this.addControl(new CButton(this, null, null, moveChosenDown));
|
|
this.moveDownButton.icon = this.moveDownButton.addControl(new CImageControl(
|
|
this.moveDownButton,
|
|
AscCommon.GlobalSkin.type == 'light' ? arrowDownIcon_dark : arrowDownIcon_light,
|
|
12 * AscCommon.g_dKoef_pix_to_mm, 7 * AscCommon.g_dKoef_pix_to_mm /* 12x7 svg icon*/
|
|
));
|
|
|
|
this.closeButton = this.addControl(new CButton(this, null, null, closePanel));
|
|
this.closeButton.icon = this.closeButton.addControl(new CImageControl(
|
|
this.closeButton,
|
|
AscCommon.GlobalSkin.type == 'light' ? closeIcon_dark : closeIcon_light,
|
|
10 * AscCommon.g_dKoef_pix_to_mm, 10 * AscCommon.g_dKoef_pix_to_mm /* 10x10 svg icon*/
|
|
));
|
|
|
|
// Event handlers for button of CAnimPaneHeader ---
|
|
|
|
function managePreview(event, x, y) {
|
|
if (!this.hit(x, y)) { return; }
|
|
if (this.isDisabled()) { return; }
|
|
if(Asc.editor.asc_IsStartedAnimationPreview()) {
|
|
Asc.editor.asc_StopAnimationPreview();
|
|
} else {
|
|
const timing = this.parentControl.getTiming();
|
|
const bIncludeFollowing = timing && (timing.getSelectedEffects().length === 1);
|
|
Asc.editor.asc_StartAnimationPreview(this.parentControl.isStartAllPreview(), bIncludeFollowing);
|
|
}
|
|
}
|
|
|
|
function moveChosenUp(event, x, y) {
|
|
if (!this.hit(x, y)) { return }
|
|
if (this.isDisabled()) { return }
|
|
if (Asc.editor.asc_canMoveAnimationEarlier()) {
|
|
if (Asc.editor.asc_IsStartedAnimationPreview()) {
|
|
Asc.editor.asc_StopAnimationPreview()
|
|
}
|
|
Asc.editor.asc_moveAnimationEarlier()
|
|
}
|
|
}
|
|
|
|
function moveChosenDown(event, x, y) {
|
|
if (!this.hit(x, y)) { return }
|
|
if (this.isDisabled()) { return }
|
|
if (Asc.editor.asc_canMoveAnimationLater()) {
|
|
if (Asc.editor.asc_IsStartedAnimationPreview()) {
|
|
Asc.editor.asc_StopAnimationPreview()
|
|
}
|
|
Asc.editor.asc_moveAnimationLater()
|
|
}
|
|
}
|
|
|
|
function closePanel(event, x, y) {
|
|
if (!this.hit(x, y)) { return }
|
|
if (this.isDisabled()) { return }
|
|
Asc.editor.asc_ShowAnimPane(false);
|
|
Asc.editor.sendEvent('asc_onCloseAnimPane');
|
|
}
|
|
|
|
// --- end of event handlers for buttons of CAnimPaneHeader
|
|
}
|
|
|
|
InitClass(CAnimPaneHeader, CTopControl, CONTROL_TYPE_HEADER);
|
|
|
|
CAnimPaneHeader.prototype.isStartAllPreview = function () {
|
|
const timing = this.getTiming();
|
|
if (!timing) { return true; }
|
|
const aSelectedEffects = timing.getSelectedEffects();
|
|
return aSelectedEffects.length === 0;
|
|
};
|
|
CAnimPaneHeader.prototype.getPlayButtonText = function () {
|
|
if (Asc.editor.asc_IsStartedAnimationPreview()) { return 'Stop'; }
|
|
if (this.isStartAllPreview()) { return 'Play All'; } // No timing or zero selected effects
|
|
if (this.getTiming().getSelectedEffects().length === 1) { return 'Play From'; } // One selected
|
|
return 'Play Selected'; // Many selected
|
|
};
|
|
CAnimPaneHeader.prototype.getPlayButtonIcon = function() {
|
|
let sPlayButtonIcon = "";
|
|
if(Asc.editor.asc_IsStartedAnimationPreview()) {
|
|
sPlayButtonIcon = AscCommon.GlobalSkin.type == 'light' ? stopIcon_dark : stopIcon_light;
|
|
}
|
|
else {
|
|
sPlayButtonIcon = AscCommon.GlobalSkin.type == 'light' ? playIcon_dark : playIcon_light;
|
|
}
|
|
return sPlayButtonIcon;
|
|
};
|
|
CAnimPaneHeader.prototype.checkLayout = function() {
|
|
AscFormat.ExecuteNoHistory(function () {
|
|
if(this.playButton.label.string !== this.getPlayButtonText()) {
|
|
this.recalculateChildrenLayout();
|
|
this.onUpdate();
|
|
}
|
|
}, this, []);
|
|
};
|
|
CAnimPaneHeader.prototype.recalculateChildrenLayout = function () {
|
|
let gap;
|
|
this.moveUpButton.icon.src =AscCommon.GlobalSkin.type == 'light' ? arrowUpIcon_dark : arrowUpIcon_light;
|
|
this.moveDownButton.icon.src = AscCommon.GlobalSkin.type == 'light' ? arrowDownIcon_dark : arrowDownIcon_light;
|
|
this.closeButton.icon.src = AscCommon.GlobalSkin.type == 'light' ? closeIcon_dark : closeIcon_light;
|
|
|
|
this.label.setLayout(COMMON_LEFT_MARGIN, 0, Math.min(HEADER_LABEL_WIDTH, this.label.cachedMaxWidth), this.getHeight());
|
|
|
|
let sPlayButtonText = this.getPlayButtonText();
|
|
let sPlayButtonIcon = this.getPlayButtonIcon();
|
|
this.playButton.icon.src = sPlayButtonIcon;
|
|
gap = (PLAY_BUTTON_HEIGHT - PLAY_BUTTON_ICON_SIZE) / 2;
|
|
this.playButton.icon.setLayout(PLAY_BUTTON_LEFT_PADDING, gap, PLAY_BUTTON_ICON_SIZE, PLAY_BUTTON_ICON_SIZE);
|
|
|
|
let oButtonLabel = this.playButton.label;
|
|
oButtonLabel.setString(sPlayButtonText);
|
|
let dLabelWidth = oButtonLabel.cachedMaxWidth;
|
|
oButtonLabel.setLayout(
|
|
this.playButton.icon.getRight() + PLAY_BUTTON_LABEL_LEFT_MARGIN,
|
|
0,
|
|
dLabelWidth,
|
|
PLAY_BUTTON_HEIGHT
|
|
);
|
|
oButtonLabel.recalculate();
|
|
|
|
this.playButton.setLayout(
|
|
this.label.getRight() + PLAY_BUTTON_LEFT_MARGIN,
|
|
(HEADER_HEIGHT - PLAY_BUTTON_HEIGHT) / 2,
|
|
this.playButton.icon.getRight() + PLAY_BUTTON_LABEL_LEFT_MARGIN + oButtonLabel.getWidth() + PLAY_BUTTON_RIGHT_PADDING,
|
|
PLAY_BUTTON_HEIGHT
|
|
);
|
|
|
|
|
|
this.moveUpButton.icon.setLayout(0, 0, MOVE_BUTTON_SIZE, MOVE_BUTTON_SIZE);
|
|
|
|
gap = (HEADER_HEIGHT - MOVE_BUTTON_SIZE) / 2;
|
|
this.moveUpButton.setLayout(
|
|
this.playButton.getRight() + MOVE_UP_BUTTON_LEFT_MARGIN,
|
|
gap,
|
|
MOVE_BUTTON_SIZE,
|
|
MOVE_BUTTON_SIZE
|
|
);
|
|
this.moveUpButton.recalculate();
|
|
|
|
this.moveDownButton.icon.setLayout(0, 0, MOVE_BUTTON_SIZE, MOVE_BUTTON_SIZE);
|
|
|
|
this.moveDownButton.setLayout(
|
|
this.moveUpButton.getRight() + MOVE_DOWN_BUTTON_LEFT_MARGIN,
|
|
gap,
|
|
MOVE_BUTTON_SIZE,
|
|
MOVE_BUTTON_SIZE
|
|
);
|
|
this.moveDownButton.recalculate();
|
|
|
|
this.closeButton.icon.setLayout(0, 0, CLOSE_BUTTON_SIZE, CLOSE_BUTTON_SIZE);
|
|
gap = (HEADER_HEIGHT - CLOSE_BUTTON_SIZE) / 2;
|
|
this.closeButton.setLayout(
|
|
this.getRight() - COMMON_RIGHT_MARGIN - CLOSE_BUTTON_SIZE,
|
|
gap,
|
|
CLOSE_BUTTON_SIZE,
|
|
CLOSE_BUTTON_SIZE
|
|
);
|
|
this.closeButton.recalculate();
|
|
};
|
|
CAnimPaneHeader.prototype.onMouseMove = function (e, x, y) {
|
|
const animPane = Asc.editor.WordControl.m_oAnimPaneApi;
|
|
animPane.SetCursorType('default', new CMouseMoveData());
|
|
|
|
for (var nChild = this.children.length - 1; nChild >= 0; --nChild) {
|
|
if (this.children[nChild].onMouseMove(e, x, y)) {
|
|
return true;
|
|
}
|
|
}
|
|
return CControl.prototype.onMouseMove.call(this, e, x, y);
|
|
};
|
|
|
|
|
|
function CTimelineContainer(oDrawer) {
|
|
CTopControl.call(this, oDrawer);
|
|
this.drawer = oDrawer;
|
|
|
|
this.zoomOutButton = this.addControl(
|
|
new CButton(this, null, null, function (e, x, y) {
|
|
if (this.hit(x, y)) editor.asc_ZoomOutTimeline();
|
|
})
|
|
);
|
|
this.zoomOutButton.icon = this.zoomOutButton.addControl(
|
|
new CImageControl(
|
|
this.zoomOutButton,
|
|
AscCommon.GlobalSkin.type == 'light' ? zoomOutIcon_dark : zoomOutIcon_light,
|
|
10 * AscCommon.g_dKoef_pix_to_mm, 1 * AscCommon.g_dKoef_pix_to_mm /* 10x1 svg image */
|
|
)
|
|
);
|
|
|
|
this.zoomLabel = this.addControl(new CLabel(this, 'Zoom', ZOOM_LABEL_FONTSIZE, false, AscCommon.align_Center));
|
|
|
|
this.zoomInButton = this.addControl(
|
|
new CButton(this, null, null, function (e, x, y) {
|
|
if (this.hit(x, y)) editor.asc_ZoomInTimeline();
|
|
})
|
|
);
|
|
this.zoomInButton.icon = this.zoomInButton.addControl(
|
|
new CImageControl(
|
|
this.zoomInButton,
|
|
AscCommon.GlobalSkin.type == 'light' ? zoomInIcon_dark : zoomInIcon_light,
|
|
11 * AscCommon.g_dKoef_pix_to_mm, 11 * AscCommon.g_dKoef_pix_to_mm /* 11x11 svg image */
|
|
)
|
|
);
|
|
|
|
this.timeline = this.addControl(new CTimeline(this));
|
|
|
|
this.onMouseDownCallback = function (event, x, y) {
|
|
if(Asc.editor.asc_IsStartedAnimationPreview()) {
|
|
Asc.editor.asc_StopAnimationPreview();
|
|
}
|
|
}
|
|
}
|
|
|
|
InitClass(CTimelineContainer, CTopControl, CONTROL_TYPE_TIMELINE_CONTAINER);
|
|
|
|
CTimelineContainer.prototype.recalculateChildrenLayout = function () {
|
|
this.zoomOutButton.icon.src = AscCommon.GlobalSkin.type == 'light' ? zoomOutIcon_dark : zoomOutIcon_light;
|
|
this.zoomInButton.icon.src = AscCommon.GlobalSkin.type == 'light' ? zoomInIcon_dark : zoomInIcon_light;
|
|
this.zoomInButton.setLayout(
|
|
TIMELINE_SCROLL_ABSOLUTE_LEFT - TIMELINE_HEIGHT + (TIMELINE_HEIGHT - ZOOM_BUTTON_SIZE) / 2,
|
|
(TIMELINE_HEIGHT - ZOOM_BUTTON_SIZE) / 2,
|
|
ZOOM_BUTTON_SIZE,
|
|
ZOOM_BUTTON_SIZE
|
|
);
|
|
this.zoomInButton.icon.setLayout(0, 0, ZOOM_BUTTON_SIZE, ZOOM_BUTTON_SIZE);
|
|
|
|
const nZoomLabelWidth = Math.min(this.zoomLabel.cachedMaxWidth, ZOOM_LABEL_WIDTH) + 2 * ZOOM_LABEL_MARGIN;
|
|
this.zoomLabel.setLayout(
|
|
this.zoomInButton.getLeft() - nZoomLabelWidth,
|
|
0,
|
|
nZoomLabelWidth,
|
|
this.getHeight()
|
|
);
|
|
|
|
this.zoomOutButton.setLayout(
|
|
this.zoomLabel.getLeft() - ZOOM_BUTTON_SIZE,
|
|
(TIMELINE_HEIGHT - ZOOM_BUTTON_SIZE) / 2,
|
|
ZOOM_BUTTON_SIZE,
|
|
ZOOM_BUTTON_SIZE
|
|
);
|
|
this.zoomOutButton.icon.setLayout(0, 0, ZOOM_BUTTON_SIZE, ZOOM_BUTTON_SIZE);
|
|
|
|
const timelineWidth = this.getWidth() -
|
|
(COMMON_LEFT_MARGIN + COMMON_RIGHT_MARGIN) -
|
|
(SCALE_BUTTON_LEFT_MARGIN + SCALE_BUTTON_WIDTH + TIMELINE_SCROLL_LEFT_MARGIN) - (ANIM_ITEM_HEIGHT - MENU_BUTTON_SIZE) / 2;
|
|
this.timeline.setLayout(
|
|
TIMELINE_SCROLL_ABSOLUTE_LEFT,
|
|
(TIMELINE_HEIGHT - TIMELINE_SCROLL_HEIGHT) / 2,
|
|
timelineWidth,
|
|
TIMELINE_SCROLL_HEIGHT
|
|
);
|
|
};
|
|
CTimelineContainer.prototype.draw = function (graphics) {
|
|
if (!CTopControl.prototype.draw.call(this, graphics)) {
|
|
return false;
|
|
}
|
|
// this.clipStart(graphics);
|
|
for (var nChild = 0; nChild < this.children.length; ++nChild) {
|
|
this.children[nChild].draw(graphics);
|
|
}
|
|
// graphics.RemoveClipRect();
|
|
// this.clipEnd(graphics);
|
|
return true;
|
|
};
|
|
CTimelineContainer.prototype.onMouseDown = function (e, x, y) {
|
|
if (this.onMouseDownCallback && this.onMouseDownCallback.call(this, e, x, y)) {
|
|
return true;
|
|
}
|
|
return CTopControl.prototype.onMouseDown.call(this, e, x, y);
|
|
};
|
|
|
|
|
|
function CTimeline(oParentControl, oContainer, oChild) {
|
|
CControlContainer.call(this, oParentControl);
|
|
|
|
this.container = oContainer;
|
|
this.scrolledChild = oChild;
|
|
|
|
this.isScrollerHovered;
|
|
this.isStickedToPointer;
|
|
|
|
this.startButton = this.addControl(new CButton(this, onFirstBtnMouseDown, null, onMouseUp));
|
|
this.startButton.icon = this.startButton.addControl(new CImageControl(
|
|
this.startButton,
|
|
AscCommon.GlobalSkin.type == 'light' ? arrowLeftIcon_dark : arrowLeftIcon_light,
|
|
5 * AscCommon.g_dKoef_pix_to_mm, 9 * AscCommon.g_dKoef_pix_to_mm /* 5x9 svg image */
|
|
));
|
|
|
|
this.endButton = this.addControl(new CButton(this, onSecondBtnMouseDown, null, onMouseUp));
|
|
this.endButton.icon = this.endButton.addControl(new CImageControl(
|
|
this.endButton,
|
|
AscCommon.GlobalSkin.type == 'light' ? arrowRightIcon_dark : arrowRightIcon_light,
|
|
5 * AscCommon.g_dKoef_pix_to_mm, 9 * AscCommon.g_dKoef_pix_to_mm /* 5x9 svg image */
|
|
));
|
|
|
|
function onFirstBtnMouseDown(e, x, y) {
|
|
if (!this.hit(x, y)) { return }
|
|
this.parentControl.setEventListener(this);
|
|
let step = SCROLL_STEP * this.parentControl.getWidth()
|
|
this.parentControl.startScroll(-step);
|
|
return true;
|
|
}
|
|
|
|
function onSecondBtnMouseDown(e, x, y) {
|
|
if (!this.hit(x, y)) { return }
|
|
this.parentControl.setEventListener(this);
|
|
let step = SCROLL_STEP * this.parentControl.getWidth()
|
|
this.parentControl.startScroll(step);
|
|
return true;
|
|
}
|
|
|
|
function onMouseUp(e, x, y) {
|
|
if (this.parentControl.isEventListener(this)) {
|
|
this.parentControl.setEventListener(null);
|
|
this.parentControl.endScroll();
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
this.timerId = null;
|
|
this.timeoutId = null;
|
|
|
|
// This fields supposed to be private
|
|
// so it should not be changed directly.
|
|
// Use set methods instead (setScrollOffset, setStartTime)
|
|
this.scrollOffset = 0; // in millimeters
|
|
this.startTime = 0; // in seconds
|
|
this.timeScaleIndex = 2;
|
|
|
|
// Tmp field for demoPreview
|
|
this.tmpScrollOffset = null;
|
|
|
|
// Labels cache
|
|
this.labels = {};
|
|
this.usedLabels = {};
|
|
this.cachedParaPr = null
|
|
|
|
this.onMouseDownCallback = function stickToPointer(event, x, y) {
|
|
if (!this.hitInScroller(x, y)) { return; }
|
|
this.isStickedToPointer = true;
|
|
this.onUpdate()
|
|
}
|
|
|
|
this.onMouseUpCallback = function unstickFromPointer(event, x, y) {
|
|
this.isStickedToPointer = false;
|
|
if (this.isOnScroll()) { this.endScroll(); }
|
|
this.onUpdate();
|
|
}
|
|
|
|
this.onMouseMoveCallback = function handlePointerMovement(event, x, y) {
|
|
// Updating hover state of the scroller
|
|
const tmpIsScrollerHovered = this.hitInScroller(x, y);
|
|
if (this.isScrollerHovered !== tmpIsScrollerHovered) {
|
|
this.isScrollerHovered = tmpIsScrollerHovered;
|
|
this.onUpdate();
|
|
}
|
|
|
|
if (!this.isStickedToPointer) { return; }
|
|
|
|
let oInv = this.getInvFullTransformMatrix();
|
|
let tx = oInv.TransformPointX(x, y);
|
|
|
|
let newScrollOffset = tx - this.getRulerStart() - TIMELINE_SCROLLER_WIDTH / 2;
|
|
|
|
// Check if the boundaried are reached and start scrolling if so
|
|
let leftBorder = this.getRulerStart();
|
|
let rightBorder = this.getRulerEnd();
|
|
if (tx <= leftBorder || tx >= rightBorder) {
|
|
if (!this.isOnScroll()) {
|
|
let scrollStep = this.getWidth() * SCROLL_STEP / 10;
|
|
scrollStep = tx <= leftBorder ? -scrollStep : scrollStep;
|
|
let scrollTimerDelay = 0;
|
|
let scrollTimerInterval = 50;
|
|
this.startScroll(scrollStep, scrollTimerDelay, scrollTimerInterval);
|
|
}
|
|
}
|
|
else this.endScroll();
|
|
|
|
// Updating scrollOffset
|
|
this.setScrollOffset(newScrollOffset)
|
|
}
|
|
}
|
|
|
|
InitClass(CTimeline, CControlContainer, CONTROL_TYPE_TIMELINE);
|
|
|
|
CTimeline.prototype.limitScrollOffset = function (newScrollOffset /* in millimeters */) {
|
|
return Math.max(0, Math.min(newScrollOffset, this.getMaxScrollOffset()));
|
|
};
|
|
CTimeline.prototype.getScrollOffset = function () {
|
|
return this.tmpScrollOffset !== null ? this.tmpScrollOffset : this.scrollOffset;
|
|
};
|
|
CTimeline.prototype.setScrollOffset = function (newScrollOffset /* in millimeters */) {
|
|
let oldScrollOffset = this.getScrollOffset()
|
|
|
|
this.scrollOffset = this.limitScrollOffset(newScrollOffset)
|
|
|
|
let difference = this.posToTime(this.getScrollOffset()) - this.posToTime(oldScrollOffset) // difference in seconds
|
|
this.setStartTime(this.getStartTime() + difference)
|
|
|
|
this.parentControl.onScroll();
|
|
this.onUpdate();
|
|
};
|
|
CTimeline.prototype.getMaxScrollOffset = function () {
|
|
return this.getWidth() - 2 * TIMELINE_SCROLL_BUTTON_SIZE - TIMELINE_SCROLLER_WIDTH;
|
|
};
|
|
|
|
CTimeline.prototype.getStartTime = function () {
|
|
return this.startTime;
|
|
};
|
|
CTimeline.prototype.setStartTime = function (newStartTime /* in seconds */) {
|
|
this.startTime = Math.max(0, newStartTime)
|
|
|
|
this.parentControl.onScroll();
|
|
this.onUpdate();
|
|
|
|
// also updating seqList to redraw effect bars
|
|
editor.WordControl.m_oAnimPaneApi.list.Control.seqList.onUpdateSeqList()
|
|
};
|
|
CTimeline.prototype.getCurrentTime = function() {
|
|
return this.posToTime(this.getScrollOffset() + this.startButton.getWidth() + TIMELINE_SCROLLER_WIDTH / 2)
|
|
}
|
|
|
|
CTimeline.prototype.startScroll = function (step /* in millimeters */, scrollTimerDelay, scrollTimerInterval) {
|
|
if (typeof scrollTimerDelay === 'undefined') { scrollTimerDelay = SCROLL_TIMER_DELAY }
|
|
if (typeof scrollTimerInterval === 'undefined') { scrollTimerInterval = SCROLL_TIMER_INTERVAL }
|
|
|
|
this.endScroll();
|
|
var oScroll = this;
|
|
oScroll.addScroll(step);
|
|
|
|
this.timeoutId = setTimeout(function () {
|
|
oScroll.timeoutId = null;
|
|
oScroll.timerId = setInterval(function () {
|
|
oScroll.addScroll(step);
|
|
}, scrollTimerInterval);
|
|
}, scrollTimerDelay);
|
|
};
|
|
CTimeline.prototype.addScroll = function (step /* in millimeters */) {
|
|
let newStartTime = this.posToTime(this.getZeroShift() + step)
|
|
|
|
const seqList = editor.WordControl.m_oAnimPaneApi.list.Control.seqList
|
|
seqList.forEachAnimItem(function (animItem) {
|
|
if (!animItem.hitResult) { return }
|
|
animItem.handleTimelineScroll(step);
|
|
})
|
|
|
|
this.setStartTime(newStartTime)
|
|
};
|
|
CTimeline.prototype.endScroll = function () {
|
|
if (this.timerId !== null) {
|
|
clearInterval(this.timerId);
|
|
this.timerId = null;
|
|
}
|
|
if (this.timeoutId !== null) {
|
|
clearTimeout(this.timeoutId);
|
|
this.timeoutId = null;
|
|
}
|
|
|
|
this.setStateFlag(STATE_FLAG_SELECTED, false);
|
|
};
|
|
CTimeline.prototype.isOnScroll = function () {
|
|
return this.timerId !== null || this.timeoutId !== null;
|
|
// return this.timerId !== null || this.timeoutId !== null || this.parentControl.isEventListener(this);
|
|
};
|
|
|
|
CTimeline.prototype.startDrawLabels = function () {
|
|
this.usedLabels = {};
|
|
};
|
|
CTimeline.prototype.endDrawLabels = function () {
|
|
for (var nTime in this.labels) {
|
|
if (!this.usedLabels[nTime]) {
|
|
var oLabel = this.labels[nTime];
|
|
oLabel.parentControl = null;
|
|
oLabel.bDeleted = true;
|
|
delete this.labels[nTime];
|
|
}
|
|
}
|
|
};
|
|
CTimeline.prototype.getLabel = function (nTime, scale) {
|
|
this.usedLabels[nTime] = true;
|
|
if (this.labels[nTime] && AscFormat.fApproxEqual(this.labels[nTime].scale, scale, 0.01)) {
|
|
return this.labels[nTime];
|
|
}
|
|
return this.cacheLabel(nTime, scale);
|
|
};
|
|
CTimeline.prototype.cacheLabel = function (nTime, scale) {
|
|
return AscFormat.ExecuteNoHistory(function () {
|
|
var oLabel = new CLabel(this, this.getTimeString(nTime), TIMELINE_LABEL_FONTSIZE, false, AscCommon.align_Center);
|
|
var oContent = oLabel.txBody.content;
|
|
oLabel.setLayout(0, 0, TIMELINE_LABEL_WIDTH, this.getHeight());
|
|
if (this.cachedParaPr) {
|
|
oContent.Content[0].CompiledPr = this.cachedParaPr;
|
|
} else {
|
|
oContent.SetApplyToAll(true);
|
|
oContent.SetParagraphAlign(AscCommon.align_Center);
|
|
oContent.SetApplyToAll(false);
|
|
}
|
|
oLabel.recalculate();
|
|
if (!this.cachedParaPr) {
|
|
this.cachedParaPr = oContent.Content[0].CompiledPr;
|
|
}
|
|
var oBaseTexture = oLabel.getAnimTexture(scale);
|
|
if (oBaseTexture) {
|
|
this.labels[nTime] = new CAnimTexture(this, oBaseTexture.canvas, oBaseTexture.scale, oBaseTexture.x, oBaseTexture.y);
|
|
}
|
|
return this.labels[nTime];
|
|
}, this, []);
|
|
};
|
|
CTimeline.prototype.getTimeString = function (nTime) {
|
|
if (nTime < 60) {
|
|
return "" + nTime;
|
|
}
|
|
|
|
const nSeconds = nTime % 60;
|
|
const nMinutes = ((nTime / 60) >> 0) % 60;
|
|
|
|
let sSeconds = padZero(nSeconds);
|
|
let sMinutes = padZero(nMinutes);
|
|
|
|
if (nTime < 3600) {
|
|
return (sMinutes + ":") + sSeconds;
|
|
}
|
|
|
|
return (((nTime / 3600) >> 0) + ":") + sMinutes + ":" + sSeconds;
|
|
|
|
function padZero(number) {
|
|
return number < 10 ? "0" + number : "" + number;
|
|
}
|
|
};
|
|
CTimeline.prototype.drawLabel = function (graphics, dPos, nTime) {
|
|
var oLabelTexture = this.getLabel(nTime, graphics.m_oCoordTransform.sx);
|
|
var oMatrix = new AscCommon.CMatrix();
|
|
var dWidth = oLabelTexture.canvas.width / oLabelTexture.scale;
|
|
var dHeight = oLabelTexture.canvas.height / oLabelTexture.scale;
|
|
graphics.drawImage2(oLabelTexture.canvas,
|
|
dPos - dWidth / 2, this.getHeight() / 2 - dHeight / 2,
|
|
dWidth,
|
|
dHeight);
|
|
// var oContent = oLabel.txBody.content;
|
|
// oContent.ShiftView(dPos - TIMELINE_LABEL_WIDTH / 2, this.getHeight() / 2 - oContent.GetSummaryHeight() / 2);
|
|
// oContent.Draw(0, graphics);
|
|
// oContent.ResetShiftView();
|
|
};
|
|
CTimeline.prototype.drawMark = function (graphics, dPos) {
|
|
var dHeight = this.getHeight() / 3;
|
|
var nPenW = this.getPenWidth(graphics);
|
|
graphics.drawVerLine(1, dPos, dHeight, dHeight + dHeight, nPenW);
|
|
};
|
|
CTimeline.prototype.start = function (graphics, dPos) {
|
|
var dHeight = this.getHeight() / 3;
|
|
var nPenW = this.getPenWidth(graphics);
|
|
graphics.drawVerLine(1, dPos, dHeight, dHeight + dHeight, nPenW);
|
|
};
|
|
CTimeline.prototype.handleUpdateExtents = function () {
|
|
this.labels = {};
|
|
this.usedLabels = {};
|
|
this.cachedParaPr = null;
|
|
if(this.startButton && this.endButton) {
|
|
this.startButton.icon.src = AscCommon.GlobalSkin.type == 'light' ? arrowLeftIcon_dark : arrowLeftIcon_light;
|
|
this.endButton.icon.src = AscCommon.GlobalSkin.type == 'light' ? arrowRightIcon_dark : arrowRightIcon_light;
|
|
}
|
|
CControlContainer.prototype.handleUpdateExtents.call(this);
|
|
};
|
|
CTimeline.prototype.draw = function (graphics) {
|
|
if (this.isHidden()) { return false }
|
|
if (!this.checkUpdateRect(graphics.updatedRect)) { return false }
|
|
|
|
this.getStartTime() === 0 ? this.startButton.disable() : this.startButton.enable();
|
|
|
|
graphics.SaveGrState();
|
|
// var dPenW = this.getPenWidth(graphics);
|
|
// graphics.SetIntegerGrid(true);
|
|
// graphics.p_width(dPenW);
|
|
// var sColor = this.children[0].getOutlineColor();
|
|
// var oColor = AscCommon.RgbaHexToRGBA(sColor);
|
|
// graphics.p_color(oColor.R, oColor.G, oColor.B, 255);
|
|
// var dPaneLeft = this.children[0].getRight();
|
|
// var dPaneWidth = this.getWidth() - (this.children[0].getWidth() + this.children[1].getWidth());
|
|
// graphics.rect(dPaneLeft, 0, dPaneWidth, this.getHeight());
|
|
// graphics.ds();
|
|
// graphics.RestoreGrState();
|
|
const sColor = AscCommon.GlobalSkin.AnimPaneTimelineRulerOutline;
|
|
var oColor = AscCommon.RgbaHexToRGBA(sColor);
|
|
var dPaneLeft = this.getRulerStart();
|
|
var dPaneWidth = this.getRulerEnd() - dPaneLeft;
|
|
var x = dPaneLeft;
|
|
var y = 0;
|
|
var extX = dPaneWidth;
|
|
var extY = this.getHeight();
|
|
graphics.transform3(this.transform);
|
|
graphics.SetIntegerGrid(true);
|
|
var nPenW = this.getPenWidth(graphics);
|
|
graphics.p_color(oColor.R, oColor.G, oColor.B, 0xFF);
|
|
graphics.drawHorLine(0, y, x, x + extX, nPenW);
|
|
graphics.drawHorLine(0, y + extY, x, x + extX, nPenW);
|
|
graphics.drawVerLine(2, x, y, y + extY, nPenW);
|
|
graphics.drawVerLine(2, x + extX, y, y + extY, nPenW);
|
|
graphics.ds();
|
|
|
|
//draw marks
|
|
//find first visible
|
|
var fStartTime = this.posToTime(this.getRulerStart());
|
|
var fTimeInterval = TIME_SCALES[this.timeScaleIndex];
|
|
var nMarksCount = TIME_INTERVALS[this.timeScaleIndex] === LONG_TIME_INTERVAL ? 10 : 2;
|
|
|
|
var dTimeOfSmallInterval = fTimeInterval / nMarksCount;
|
|
var nStartIntervalIdx = this.startTime / dTimeOfSmallInterval >> 0;
|
|
var nEndIntervalIdx = this.posToTime(this.getRulerEnd()) / dTimeOfSmallInterval + 0.5 >> 0;
|
|
this.startDrawLabels();
|
|
|
|
graphics.SaveGrState();
|
|
var nInterval;
|
|
graphics.AddClipRect(x, y, extX, extY);
|
|
oColor = AscCommon.RgbaHexToRGBA(AscCommon.GlobalSkin.AnimPaneTimelineRulerTick);
|
|
graphics.p_color(oColor.R, oColor.G, oColor.B, 0xFF);
|
|
for (nInterval = nStartIntervalIdx; nInterval <= nEndIntervalIdx; ++nInterval) {
|
|
var dTime = nInterval * dTimeOfSmallInterval;
|
|
var dPos = this.timeToPos(dTime);
|
|
if (nInterval % nMarksCount !== 0) {
|
|
this.drawMark(graphics, dPos);
|
|
} else {
|
|
this.drawLabel(graphics, dPos, dTime);
|
|
}
|
|
}
|
|
graphics.ds();
|
|
// for(nInterval = nFirstInterval; nInterval <= nLastInterval; ++nInterval) {
|
|
// var dTime = nInterval*dSmallInterval;
|
|
// var dPos = this.timeToPos(dTime);
|
|
// if(nInterval % nMarksCount === 0) {
|
|
// this.drawLabel(graphics, dPos, dTime);
|
|
// }
|
|
// }
|
|
|
|
graphics.RestoreGrState();
|
|
this.endDrawLabels();
|
|
//
|
|
|
|
this.drawScroller(graphics);
|
|
|
|
graphics.RestoreGrState();
|
|
|
|
if (!CControlContainer.prototype.draw.call(this, graphics)) {
|
|
return false;
|
|
}
|
|
};
|
|
CTimeline.prototype.drawScroller = function (graphics) {
|
|
let x = this.getRulerStart() + this.getScrollOffset();
|
|
let y = 0;
|
|
let extX = TIMELINE_SCROLLER_WIDTH;
|
|
let extY = this.getHeight();
|
|
|
|
const oSkin = AscCommon.GlobalSkin;
|
|
const oFillColor = AscCommon.RgbaHexToRGBA(oSkin.AnimPaneTimelineScrollerFill);
|
|
|
|
let nOpacity;
|
|
if (this.isStickedToPointer) {
|
|
nOpacity = 0.5;//oSkin.AnimPaneTimelineScrollerOpacityActive;
|
|
} else if (this.isScrollerHovered) {
|
|
nOpacity = oSkin.AnimPaneTimelineScrollerOpacityHovered;
|
|
} else {
|
|
nOpacity = oSkin.AnimPaneTimelineScrollerOpacity;
|
|
}
|
|
|
|
graphics.b_color1(oFillColor.R, oFillColor.G, oFillColor.B, nOpacity * 255);
|
|
graphics.rect(x, y, extX, extY);
|
|
graphics.df();
|
|
|
|
let nPenW = this.getPenWidth(graphics);
|
|
|
|
|
|
let sColor = oSkin.AnimPaneTimelineScrollerOutline;
|
|
let oColor = AscCommon.RgbaHexToRGBA(sColor);
|
|
graphics.p_color(oColor.R, oColor.G, oColor.B, 0xFF);
|
|
graphics.drawHorLine(0, y, x, x + extX, nPenW);
|
|
graphics.drawHorLine(0, y + extY, x, x + extX, nPenW);
|
|
graphics.drawVerLine(2, x, y, y + extY, nPenW);
|
|
graphics.drawVerLine(2, x + extX, y, y + extY, nPenW);
|
|
|
|
if (this.tmpScrollOffset !== null) {
|
|
graphics.SaveGrState();
|
|
graphics.RemoveClipRect();
|
|
|
|
// const seqList = Asc.editor.WordControl.m_oAnimPaneApi.list.Control.seqList
|
|
// graphics.drawVerLine(1, x + extX / 2, seqList.getTop(), y, nPenW);
|
|
graphics.drawVerLine(1, x + extX / 2, y - 1000, y, nPenW);
|
|
|
|
graphics.RestoreGrState();
|
|
}
|
|
|
|
return true;
|
|
};
|
|
CTimeline.prototype.hitInScroller = function(x, y) {
|
|
// x, y - relatively to this.parentContainer
|
|
// tx, ty - relatively to this
|
|
|
|
let oInv = this.getInvFullTransformMatrix();
|
|
let tx = oInv.TransformPointX(x, y);
|
|
let ty = oInv.TransformPointY(x, y);
|
|
|
|
let l = this.getRulerStart() + this.getScrollOffset();
|
|
let t = 0;
|
|
let r = l + TIMELINE_SCROLLER_WIDTH;
|
|
let b = t + this.getHeight();
|
|
|
|
return tx >= l && tx <= r && ty >= t && ty <= b;
|
|
}
|
|
|
|
CTimeline.prototype.onPreviewStart = function() {
|
|
AscFormat.ExecuteNoHistory(function () {
|
|
this.tmpScrollOffset = 0;
|
|
this.setStartTime(0);
|
|
|
|
const previewTimings = Asc.editor.WordControl.m_oLogicDocument.previewPlayer.timings;
|
|
this.demoTiming = previewTimings[0]; // effects are smoothed to follow each other
|
|
this.rawDemoTiming = previewTimings[1]; // timing with only effects for preview (without smoothing)
|
|
|
|
const oPaneApi = Asc.editor.WordControl.m_oAnimPaneApi;
|
|
oPaneApi.list.Control.recalculateByTiming(this.rawDemoTiming);
|
|
|
|
oPaneApi.header.Control.recalculateChildrenLayout();
|
|
oPaneApi.header.OnPaint();
|
|
oPaneApi.timeline.OnPaint();
|
|
oPaneApi.list.OnPaint();
|
|
// this.onUpdate();
|
|
}, this, []);
|
|
}
|
|
CTimeline.prototype.onPreviewStop = function() {
|
|
AscFormat.ExecuteNoHistory(function () {
|
|
this.demoTiming = null;
|
|
this.rawDemoTiming = null;
|
|
this.tmpScrollOffset = null;
|
|
this.setStartTime(0);
|
|
|
|
const oPaneApi = Asc.editor.WordControl.m_oAnimPaneApi;
|
|
oPaneApi.list.Control.recalculateByTiming(this.getTiming());
|
|
|
|
oPaneApi.header.Control.recalculateChildrenLayout();
|
|
oPaneApi.header.OnPaint();
|
|
oPaneApi.timeline.OnPaint();
|
|
oPaneApi.list.OnPaint();
|
|
// this.onUpdate();
|
|
}, this, []);
|
|
}
|
|
CTimeline.prototype.onPreview = function(elapsedTicks) {
|
|
if (this.tmpScrollOffset === null) { return; }
|
|
if (!this.demoTiming) { return; }
|
|
|
|
const currentlyPlayingDemoEffects = this.getCurrentlyPlayingDemoEffects(elapsedTicks);
|
|
|
|
const currentlyPlayingDemoEffect = currentlyPlayingDemoEffects[0]; // first in group
|
|
const correction = (currentlyPlayingDemoEffect)
|
|
? currentlyPlayingDemoEffect.originalNode.getBaseTime() - currentlyPlayingDemoEffect.getBaseTime()
|
|
: 0;
|
|
this.tmpScrollOffset = this.getNewTmpScrollOffset(elapsedTicks, correction);
|
|
|
|
const seqList = Asc.editor.WordControl.m_oAnimPaneApi.list.Control.seqList;
|
|
seqList.setCurrentlyPlaying(currentlyPlayingDemoEffects);
|
|
|
|
// this.parentControl.drawer == editor.WordControl.m_oAnimPaneApi.timeline
|
|
Asc.editor.WordControl.m_oAnimPaneApi.timeline.OnPaint();
|
|
Asc.editor.WordControl.m_oAnimPaneApi.list.OnPaint();
|
|
}
|
|
CTimeline.prototype.getCurrentlyPlayingDemoEffects = function (elapsedTicks) {
|
|
const demoEffects = this.demoTiming.getRootSequences()[0].getAllEffects();
|
|
const rawDemoEffects = this.rawDemoTiming.getRootSequences()[0].getAllEffects();
|
|
rawDemoEffects.forEach(function (effect, index) {
|
|
effect.originalDemoNode = demoEffects[index];
|
|
});
|
|
|
|
// Getting level 3 Time Node Containers
|
|
// Each contains either 'after'-effect or 'click'-effect with mulpiple 'with'-effects
|
|
const lvl3DemoTimingNodes = this.demoTiming.getRootSequences(0)[0].getChildrenTimeNodes()[0].getChildrenTimeNodes();
|
|
|
|
// Getting first active level 3 Time Node Container
|
|
// to get currently active demo effect
|
|
let activeDemoEffect = null;
|
|
for (let nodeIndex = lvl3DemoTimingNodes.length - 1; nodeIndex >= 0; --nodeIndex) {
|
|
const node = lvl3DemoTimingNodes[nodeIndex];
|
|
if (node.isActive()) {
|
|
activeDemoEffect = node.getAllAnimEffects()[0];
|
|
break;
|
|
}
|
|
}
|
|
|
|
if(activeDemoEffect) {
|
|
// Get index of active demo effect (in array of all raw demo effects)
|
|
let activeDemoEffectIndex;
|
|
for (let nEffect = 0; nEffect < rawDemoEffects.length; nEffect++) {
|
|
if (rawDemoEffects[nEffect].originalNode === activeDemoEffect.originalNode) {
|
|
activeDemoEffectIndex = nEffect;
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Get group of active raw demo effects and their corresponding demo effects
|
|
const activeRawDemoEffects = rawDemoEffects[activeDemoEffectIndex].getTimeNodeWithLvl(2).getAllAnimEffects();
|
|
const activeDemoEffects = activeRawDemoEffects.map(function (rawEffect) {
|
|
return rawEffect.originalDemoNode;
|
|
});
|
|
|
|
return activeDemoEffects;
|
|
}
|
|
return [];
|
|
};
|
|
CTimeline.prototype.getNewTmpScrollOffset = function (elapsedTicks, correction) {
|
|
const leftLimit = 0;
|
|
const rightLimit = this.getRulerEnd() - this.getZeroShift();
|
|
|
|
let newTmpScrollOffset = ms_to_mm(elapsedTicks + correction) - ms_to_mm(this.getStartTime() * 1000);
|
|
if (newTmpScrollOffset < leftLimit) {
|
|
this.setStartTime(0);
|
|
newTmpScrollOffset = 0;
|
|
}
|
|
if (newTmpScrollOffset > rightLimit) {
|
|
const rulerDur = mm_to_ms(this.getRulerEnd() - this.getRulerStart()) / 1000; // seconds
|
|
this.setStartTime(this.getStartTime() + rulerDur / 2);
|
|
newTmpScrollOffset -= ms_to_mm(rulerDur / 2);
|
|
}
|
|
|
|
return newTmpScrollOffset;
|
|
|
|
function ms_to_mm(nMilliseconds) {
|
|
const index = Asc.editor.WordControl.m_oAnimPaneApi.timeline.Control.timeline.timeScaleIndex;
|
|
return nMilliseconds * TIME_INTERVALS[index] / TIME_SCALES[index] / 1000;
|
|
}
|
|
function mm_to_ms(nMillimeters) {
|
|
const index = Asc.editor.WordControl.m_oAnimPaneApi.timeline.Control.timeline.timeScaleIndex;
|
|
return nMillimeters / TIME_INTERVALS[index] * TIME_SCALES[index] * 1000;
|
|
}
|
|
};
|
|
|
|
CTimeline.prototype.getRulerStart = function () {
|
|
return this.startButton.getRight();
|
|
};
|
|
CTimeline.prototype.getRulerEnd = function () {
|
|
return this.getWidth() - this.endButton.getWidth();
|
|
};
|
|
CTimeline.prototype.getZeroShift = function () {
|
|
// Returns the value (in millimeters) of the left margin of the start of the ruler
|
|
return this.getRulerStart() + TIMELINE_SCROLLER_WIDTH / 2;
|
|
};
|
|
|
|
/*
|
|
* Functions to convert time to pos and vice versa
|
|
*/
|
|
CTimeline.prototype.getLinearCoeffs = function () {
|
|
//linear relationship x = a*t + b
|
|
var a = TIME_INTERVALS[this.timeScaleIndex] / TIME_SCALES[this.timeScaleIndex];
|
|
var b = this.getZeroShift() - a * this.startTime;
|
|
return { a: a, b: b };
|
|
};
|
|
CTimeline.prototype.timeToPos = function (fTime) {
|
|
//linear relationship x = a*t + b
|
|
var oCoefs = this.getLinearCoeffs();
|
|
return oCoefs.a * fTime + oCoefs.b;
|
|
};
|
|
CTimeline.prototype.posToTime = function (fPos) {
|
|
//linear relationship x = a*t + b
|
|
var oCoefs = this.getLinearCoeffs();
|
|
return (fPos - oCoefs.b) / oCoefs.a;
|
|
};
|
|
CTimeline.prototype.changeTimelineScale = function (bZoomOut) {
|
|
this.timeScaleIndex = bZoomOut ?
|
|
Math.min(this.timeScaleIndex + 1, TIME_SCALES.length - 1) :
|
|
Math.max(this.timeScaleIndex - 1, 0)
|
|
|
|
this.onUpdate();
|
|
|
|
// also updating seqList to redraw effect bars
|
|
editor.WordControl.m_oAnimPaneApi.list.Control.seqList.onUpdateSeqList();
|
|
}
|
|
CTimeline.prototype.canHandleEvents = function () {
|
|
return true;
|
|
};
|
|
CTimeline.prototype.recalculateChildrenLayout = function () {
|
|
this.startButton.setLayout(0, 0, TIMELINE_SCROLL_BUTTON_SIZE, TIMELINE_SCROLL_BUTTON_SIZE);
|
|
this.startButton.icon.setLayout(0, 0, TIMELINE_SCROLL_BUTTON_SIZE, TIMELINE_SCROLL_BUTTON_SIZE);
|
|
|
|
this.endButton.setLayout(this.getWidth() - TIMELINE_SCROLL_BUTTON_SIZE, 0, TIMELINE_SCROLL_BUTTON_SIZE, TIMELINE_SCROLL_BUTTON_SIZE);
|
|
this.endButton.icon.setLayout(0, 0, TIMELINE_SCROLL_BUTTON_SIZE, TIMELINE_SCROLL_BUTTON_SIZE);
|
|
|
|
const currentScrollOffset = this.getScrollOffset()
|
|
if (currentScrollOffset >= this.getMaxScrollOffset()) {
|
|
this.setScrollOffset(currentScrollOffset)
|
|
}
|
|
};
|
|
CTimeline.prototype.onMouseDown = function (e, x, y) {
|
|
if (this.onMouseDownCallback && this.onMouseDownCallback.call(this, e, x, y)) {
|
|
return true;
|
|
}
|
|
return CControlContainer.prototype.onMouseDown.call(this, e, x, y);
|
|
};
|
|
CTimeline.prototype.onMouseMove = function (e, x, y) {
|
|
if (this.onMouseMoveCallback && this.onMouseMoveCallback.call(this, e, x, y)) {
|
|
return true;
|
|
}
|
|
return CControlContainer.prototype.onMouseMove.call(this, e, x, y);
|
|
};
|
|
CTimeline.prototype.onMouseUp = function (e, x, y) {
|
|
if (this.onMouseUpCallback && this.onMouseUpCallback.call(this, e, x, y)) {
|
|
return true;
|
|
}
|
|
return CControlContainer.prototype.onMouseUp.call(this, e, x, y);
|
|
};
|
|
|
|
|
|
function CSeqListContainer(oDrawer) {
|
|
CTopControl.call(this, oDrawer);
|
|
this.seqList = this.addControl(new CSeqList(this));
|
|
|
|
this.onMouseDownCallback = function (event, x, y) {
|
|
if(Asc.editor.asc_IsStartedAnimationPreview()) {
|
|
Asc.editor.asc_StopAnimationPreview();
|
|
}
|
|
|
|
if (this.seqList.hit(x, y)) { return }
|
|
|
|
this.seqList.forEachAnimItem(function (animItem) { animItem.effect.deselect() })
|
|
Asc.editor.WordControl.m_oLogicDocument.RedrawCurSlide()
|
|
Asc.editor.WordControl.m_oLogicDocument.Document_UpdateInterfaceState()
|
|
}
|
|
}
|
|
|
|
InitClass(CSeqListContainer, CTopControl, CONTROL_TYPE_SEQ_LIST_CONTAINER);
|
|
|
|
CSeqListContainer.prototype.recalculateChildrenLayout = function () {
|
|
this.seqList.setLayout(
|
|
COMMON_LEFT_MARGIN,
|
|
0,
|
|
this.getWidth() - COMMON_LEFT_MARGIN - COMMON_RIGHT_MARGIN,
|
|
this.seqList.getHeight());
|
|
this.seqList.recalculate();
|
|
this.setLayout(0, 0, this.getWidth(), this.seqList.getHeight());
|
|
};
|
|
CSeqListContainer.prototype.recalculateByTiming = function (customTiming) {
|
|
AscFormat.ExecuteNoHistory(function () {
|
|
if (!customTiming) { return; }
|
|
this.seqList.recalculateChildren(customTiming);
|
|
this.seqList.recalculateChildrenLayout();
|
|
this.seqList.parentControl.recalculateChildrenLayout();
|
|
this.seqList.parentControl.onUpdate();
|
|
this.seqList.parentControl.drawer.CheckScroll();
|
|
}, this, []);
|
|
};
|
|
CSeqListContainer.prototype.onScroll = function () {
|
|
this.onUpdate();
|
|
};
|
|
CSeqListContainer.prototype.onMouseWheel = function (e, deltaY, X, Y) {
|
|
return false;
|
|
};
|
|
CSeqListContainer.prototype.onMouseDown = function (e, x, y) {
|
|
if (this.onMouseDownCallback && this.onMouseDownCallback.call(this, e, x, y)) {
|
|
return true;
|
|
}
|
|
return CTopControl.prototype.onMouseDown.call(this, e, x, y);
|
|
};
|
|
|
|
|
|
function CSeqList(oParentControl) {
|
|
CControlContainer.call(this, oParentControl);
|
|
// this.children - mainSeq, interactiveSeq
|
|
|
|
this.indexLabelWidth = null;
|
|
// Tmp field for animItems moving up/down
|
|
this.pressingPoint = null;
|
|
this.nPressedSlot = null;
|
|
this.nCurrentSlot = null;
|
|
this.bTopPart = false;
|
|
|
|
this.getIndexLabelWidth = function () {
|
|
if (this.indexLabelWidth === null) {
|
|
let nMaxIndexWidth = 0;
|
|
this.forEachAnimItem(function (oAnimItem) {
|
|
if (oAnimItem.indexLabel) {
|
|
const nIndexWidth = oAnimItem.indexLabel.cachedMaxWidth;
|
|
if (nIndexWidth > nMaxIndexWidth) {
|
|
nMaxIndexWidth = nIndexWidth;
|
|
}
|
|
}
|
|
});
|
|
this.indexLabelWidth = Math.min(nMaxIndexWidth, INDEX_LABEL_WIDTH);
|
|
}
|
|
return this.indexLabelWidth;
|
|
};
|
|
this.onMouseDownCallback = function (event, x, y) {
|
|
const oThis = this;
|
|
this.forEachAnimItem(function (animItem, index, groupIndex, seqIndex) {
|
|
const hit = animItem.hit(x, y);
|
|
const hitInEffectBar = animItem.hitInEffectBar(x, y);
|
|
const hitInMenuButton = animItem.contextMenuButton.hit(x, y);
|
|
if (hit && !hitInEffectBar && !hitInMenuButton) {
|
|
oThis.nPressedSlot = index + seqIndex;
|
|
oThis.pressingPoint = { x: x, y: y };
|
|
}
|
|
})
|
|
this.onUpdate();
|
|
}
|
|
this.onMouseMoveCallback = function (event, x, y) {
|
|
if (this.nPressedSlot === null) { return }
|
|
const oThis = this;
|
|
|
|
const minRadius = 2; // in millimeters
|
|
const currentShift = Math.sqrt(Math.pow(oThis.pressingPoint.x - x, 2) + Math.pow(oThis.pressingPoint.y - y, 2));
|
|
const bDistancePassed = currentShift >= minRadius;
|
|
if (!bDistancePassed) { return }
|
|
|
|
let nLastCheckedSeq = null;
|
|
let hit = null;
|
|
this.forEachAnimItem(function (animItem, index, groupIndex, seqIndex) {
|
|
const seqLabel = oThis.children[seqIndex].label;
|
|
if (seqIndex !== nLastCheckedSeq && seqLabel !== null && seqLabel.hit(x, y)) {
|
|
hit = 'top';
|
|
nLastCheckedSeq = seqIndex;
|
|
} else {
|
|
hit = animItem.hit(x, y);
|
|
}
|
|
|
|
if (hit) {
|
|
oThis.nCurrentSlot = index + seqIndex;
|
|
oThis.bTopPart = (hit === 'top');
|
|
}
|
|
})
|
|
this.onUpdate();
|
|
}
|
|
this.onMouseUpCallback = function (event, x, y) {
|
|
if (this.nCurrentSlot !== null && this.nPressedSlot !== null) {
|
|
let moves = this.nCurrentSlot - this.nPressedSlot;
|
|
if (moves > 0 && this.bTopPart) { moves -= 1; }
|
|
if (moves < 0 && !this.bTopPart) { moves += 1; }
|
|
|
|
if (moves > 0) {
|
|
if (Asc.editor.asc_canMoveAnimationLater(moves)) {
|
|
Asc.editor.asc_moveAnimationLater(moves)
|
|
}
|
|
}
|
|
|
|
if (moves < 0) {
|
|
if (Asc.editor.asc_canMoveAnimationEarlier(Math.abs(moves))) {
|
|
Asc.editor.asc_moveAnimationEarlier(Math.abs(moves))
|
|
}
|
|
}
|
|
}
|
|
|
|
this.pressingPoint = null;
|
|
this.nPressedSlot = null;
|
|
this.nCurrentSlot = null;
|
|
this.onUpdate();
|
|
}
|
|
}
|
|
|
|
InitClass(CSeqList, CControlContainer, CONTROL_TYPE_SEQ_LIST);
|
|
|
|
CSeqList.prototype.recalculateChildren = function (oCustomTiming) {
|
|
this.clear();
|
|
|
|
const oTiming = oCustomTiming || this.getTiming();
|
|
if (!oTiming) { return }
|
|
|
|
const aAllSeqs = oTiming.getRootSequences();
|
|
let oLastSeqView = null; // Зачем нужна эта переменная?
|
|
for (var nSeq = 0; nSeq < aAllSeqs.length; ++nSeq) {
|
|
const oSeqView = new CAnimSequence(this, aAllSeqs[nSeq]);
|
|
this.addControl(oSeqView);
|
|
oLastSeqView = oSeqView;
|
|
}
|
|
};
|
|
CSeqList.prototype.recalculateChildrenLayout = function () {
|
|
this.indexLabelWidth = null;
|
|
let dLastBottom = 0;
|
|
|
|
for (let nChild = 0; nChild < this.children.length; ++nChild) {
|
|
const oSeq = this.children[nChild];
|
|
oSeq.setLayout(0, dLastBottom, this.getWidth(), 0);
|
|
oSeq.recalculate();
|
|
dLastBottom = oSeq.getBottom();
|
|
}
|
|
this.setLayout(this.getLeft(), this.getTop(), this.getWidth(), dLastBottom);
|
|
};
|
|
CSeqList.prototype.draw = function (graphics) {
|
|
if (!CControlContainer.prototype.draw.call(this, graphics)) { return false; }
|
|
|
|
// Draw horizontal line when animItem is moving
|
|
if (this.nCurrentSlot !== null) {
|
|
const oThis = this;
|
|
let currentAnimItem;
|
|
this.forEachAnimItem(function(animItem, index, groupIndex, seqIndex) {
|
|
if (index + seqIndex === oThis.nCurrentSlot) currentAnimItem = animItem;
|
|
})
|
|
|
|
const transformX = function (x, y) { return graphics.m_oFullTransform.TransformPointX(x, y) + 0.5 >> 0; }
|
|
const transformY = function (x, y) { return graphics.m_oFullTransform.TransformPointY(x, y) + 0.5 >> 0; }
|
|
|
|
const yCord = this.bTopPart ? currentAnimItem.bounds.t : currentAnimItem.bounds.b;
|
|
const triangle_diagonal_half = 1; // mm
|
|
|
|
const outerLeft = transformX(this.getLeft(), yCord);
|
|
const innerLeft = transformX(this.getLeft() + triangle_diagonal_half, yCord);
|
|
const innerRight = transformX(this.getRight() - triangle_diagonal_half, yCord);
|
|
const outerRight = transformX(this.getRight(), yCord);
|
|
const top = transformY(0, yCord - triangle_diagonal_half);
|
|
const center = transformY(0, yCord);
|
|
const bottom = transformY(0, yCord + triangle_diagonal_half);
|
|
|
|
graphics.SaveGrState();
|
|
graphics.RemoveClipRect();
|
|
|
|
let ctx = graphics.m_oContext;
|
|
ctx.beginPath();
|
|
ctx.moveTo(innerLeft, center);
|
|
ctx.lineTo(outerLeft, top);
|
|
ctx.lineTo(outerLeft, bottom);
|
|
ctx.lineTo(innerLeft, center);
|
|
ctx.lineTo(innerRight, center);
|
|
ctx.lineTo(outerRight, top);
|
|
ctx.lineTo(outerRight, bottom);
|
|
ctx.lineTo(innerRight, center);
|
|
graphics.df();
|
|
graphics.ds();
|
|
|
|
graphics.RestoreGrState();
|
|
}
|
|
|
|
// Draw preview line
|
|
const timeline = Asc.editor.WordControl.m_oAnimPaneApi.timeline.Control.timeline;
|
|
if (timeline.tmpScrollOffset !== null) {
|
|
graphics.SaveGrState();
|
|
graphics.RemoveClipRect();
|
|
|
|
let sColor = AscCommon.GlobalSkin.AnimPaneTimelineScrollerOutline;
|
|
let oColor = AscCommon.RgbaHexToRGBA(sColor);
|
|
graphics.p_color(oColor.R, oColor.G, oColor.B, 255);
|
|
const xCord = timeline.getLeft() + timeline.getZeroShift() + timeline.tmpScrollOffset;
|
|
const height = this.parentControl.drawer.GetHeight() + editor.WordControl.m_oAnimPaneApi.list.Scroll * g_dKoef_pix_to_mm;
|
|
graphics.drawVerLine(1, xCord, this.getTop(), this.getTop() + height, this.getPenWidth(graphics));
|
|
|
|
graphics.RestoreGrState();
|
|
}
|
|
|
|
return true;
|
|
}
|
|
CSeqList.prototype.onMouseDown = function (e, x, y) {
|
|
if (this.onMouseDownCallback) this.onMouseDownCallback(e, x, y);
|
|
return CControlContainer.prototype.onMouseDown.call(this, e, x, y);
|
|
};
|
|
CSeqList.prototype.onMouseMove = function (e, x, y) {
|
|
if (this.onMouseMoveCallback) this.onMouseMoveCallback(e, x, y);
|
|
return CControlContainer.prototype.onMouseMove.call(this, e, x, y);
|
|
};
|
|
CSeqList.prototype.onMouseUp = function (e, x, y) {
|
|
if (this.onMouseUpCallback) this.onMouseUpCallback(e, x, y);
|
|
return CControlContainer.prototype.onMouseUp.call(this, e, x, y);
|
|
};
|
|
|
|
CSeqList.prototype.onUpdateSeqList = function () {
|
|
if (Asc.editor.WordControl.m_oAnimPaneApi.list.Control) {
|
|
this.onUpdate()
|
|
}
|
|
}
|
|
|
|
CSeqList.prototype.checkCachedTexture = function (graphics) {
|
|
var dGraphicsScale = graphics.m_oCoordTransform.sx;
|
|
if (this.cachedCanvas) {
|
|
var dScale = this.cachedCanvas.scale;
|
|
if (AscFormat.fApproxEqual(dScale, dGraphicsScale)) {
|
|
return this.cachedCanvas;
|
|
}
|
|
}
|
|
this.bDrawTexture = true;
|
|
var oBaseTexture = this.getAnimTexture(dGraphicsScale);
|
|
if (oBaseTexture) {
|
|
this.cachedCanvas = new CAnimTexture(this, oBaseTexture.canvas, oBaseTexture.scale, oBaseTexture.x, oBaseTexture.y);
|
|
}
|
|
else {
|
|
this.cachedCanvas = null;
|
|
}
|
|
this.bDrawTexture = false;
|
|
return this.cachedCanvas;
|
|
};
|
|
CSeqList.prototype.clearCachedTexture = function () {
|
|
if (this.cachedCanvas) {
|
|
this.cachedCanvas = null;
|
|
}
|
|
};
|
|
CSeqList.prototype.setCurrentlyPlaying = function (demoEffects) {
|
|
if (!demoEffects) { return; }
|
|
|
|
const originalEffects = demoEffects.map(
|
|
function (demoEffect) {
|
|
return demoEffect.originalNode;
|
|
}
|
|
);
|
|
this.forEachAnimItem(
|
|
function (animItem) {
|
|
animItem.isCurrentlyPlaying = (originalEffects.indexOf(animItem.effect.originalNode) > -1);
|
|
}
|
|
)
|
|
};
|
|
CSeqList.prototype.forEachAnimItem = function (callback) {
|
|
// У счетчиков сквозная нумерация
|
|
let seqCounter = 0;
|
|
let groupCounter = 0;
|
|
let itemCounter = 0;
|
|
this.children.forEach(function (seq) {
|
|
seq.animGroups.forEach(function (group) {
|
|
group.children.forEach(function (animItem) {
|
|
callback(animItem, itemCounter, groupCounter, seqCounter);
|
|
itemCounter++;
|
|
})
|
|
groupCounter++;
|
|
})
|
|
seqCounter++;
|
|
})
|
|
};
|
|
|
|
|
|
// mainSeq or interactiveSeq
|
|
function CAnimSequence(oParentControl, oSeq) {
|
|
CControlContainer.call(this, oParentControl);
|
|
this.seq = oSeq;
|
|
this.label = null; //this.addControl(new CLabel(this, "seq"));
|
|
this.animGroups = [];
|
|
}
|
|
|
|
InitClass(CAnimSequence, CControlContainer, CONTROL_TYPE_ANIM_SEQ);
|
|
|
|
CAnimSequence.prototype.getSeq = function () {
|
|
return this.seq;
|
|
};
|
|
CAnimSequence.prototype.recalculateChildren = function () {
|
|
this.clear();
|
|
|
|
let sLabel = this.seq.getLabel();
|
|
if (typeof sLabel === "string" && sLabel.length > 0) {
|
|
this.label = this.addControl(new CLabel(this, sLabel, 9, true, AscCommon.align_Left));
|
|
}
|
|
|
|
const aAllEffects = this.seq.getAllEffects();
|
|
const animGroups = AscFormat.groupBy(aAllEffects, function (effect) { return effect.getIndexInSequence(); })
|
|
|
|
for (let indexInSequence in animGroups) {
|
|
const oAnimGroup = this.addControl(new CAnimGroup(this, animGroups[indexInSequence]));
|
|
this.animGroups[this.animGroups.length] = oAnimGroup;
|
|
}
|
|
};
|
|
CAnimSequence.prototype.recalculateChildrenLayout = function () {
|
|
let dCurY = 0;
|
|
if (this.label) {
|
|
dCurY += SEQ_LABEL_MARGIN;
|
|
this.label.setLayout(SEQ_LABEL_MARGIN, dCurY, this.getWidth(), SEQ_LABEL_HEIGHT);
|
|
this.label.recalculate();
|
|
dCurY += this.label.getHeight() + SEQ_LABEL_MARGIN;
|
|
}
|
|
for (let nGroup = 0; nGroup < this.animGroups.length; ++nGroup) {
|
|
this.animGroups[nGroup].setLayout(0, dCurY, this.getWidth(), 0);
|
|
this.animGroups[nGroup].recalculate();
|
|
dCurY += this.animGroups[nGroup].getHeight();
|
|
}
|
|
this.setLayout(this.getLeft(), this.getTop(), this.getWidth(), dCurY);
|
|
};
|
|
|
|
|
|
function CAnimGroup(oParentControl, aAllGroupEffects) {
|
|
CControlContainer.call(this, oParentControl);
|
|
this.effects = aAllGroupEffects;
|
|
}
|
|
|
|
InitClass(CAnimGroup, CControlContainer, CONTROL_TYPE_ANIM_GROUP_LIST);
|
|
|
|
CAnimGroup.prototype.getSeq = function () {
|
|
return this.parentControl.getSeq();
|
|
};
|
|
CAnimGroup.prototype.recalculateChildren = function () {
|
|
this.clear();
|
|
|
|
for (let nCurEffect = this.effects.length - 1; nCurEffect >= 0; --nCurEffect) {
|
|
const oItem = new CAnimItem(this, this.effects[nCurEffect]);
|
|
this.addControl(oItem);
|
|
}
|
|
};
|
|
CAnimGroup.prototype.recalculateChildrenLayout = function () {
|
|
let dLastBottom = 0;
|
|
|
|
for (let nChild = 0; nChild < this.children.length; ++nChild) {
|
|
let oChild = this.children[nChild];
|
|
oChild.setLayout(0, dLastBottom, this.getWidth(), ANIM_ITEM_HEIGHT);
|
|
oChild.recalculate();
|
|
dLastBottom = oChild.getBottom();
|
|
}
|
|
this.setLayout(this.getLeft(), this.getTop(), this.getWidth(), dLastBottom);
|
|
};
|
|
CAnimGroup.prototype.draw = function(graphics) {
|
|
if (this.isHidden()) { return false; }
|
|
if (!this.checkUpdateRect(graphics.updatedRect)) { return false; }
|
|
if (!CControlContainer.prototype.draw.call(this, graphics)) { return false; }
|
|
|
|
// Connection lines drawing
|
|
let bShouldDraw = false;
|
|
this.effects.some(function (effect) {
|
|
if (effect.isSelected()) return bShouldDraw = true;
|
|
})
|
|
if (!bShouldDraw) { return }
|
|
|
|
const oThis = this;
|
|
const timeline = Asc.editor.WordControl.m_oAnimPaneApi.timeline.Control.timeline;
|
|
const timelineShift = ms_to_mm(timeline.getStartTime() * 1000);
|
|
|
|
let afterItems = []
|
|
this.children.forEach(function (animItem) {
|
|
if (animItem.effect.isAfterEffect()) afterItems[afterItems.length] = animItem;
|
|
})
|
|
if (afterItems.length === 0) { return }
|
|
|
|
graphics.SaveGrState();
|
|
graphics.AddClipRect(
|
|
afterItems[0].getLeftBorder(),
|
|
oThis.parentControl.getTop(),
|
|
afterItems[0].getRightBorder() - afterItems[0].getLeftBorder(),
|
|
oThis.parentControl.getBottom() - oThis.parentControl.getTop()
|
|
);
|
|
|
|
for (let i = 0; i < afterItems.length; i++) {
|
|
const animItem = afterItems[i];
|
|
|
|
if (animItem.effect === this.effects[this.effects.length - 1]) {
|
|
// effects in group are arranged backwards
|
|
continue;
|
|
}
|
|
|
|
const align = 0;
|
|
const x = ms_to_mm(animItem.effect.getBaseTime()) + animItem.getLeftBorder() - timelineShift;
|
|
let top = afterItems[i-1] ? oThis.getTop() + afterItems[i-1].getTop() : oThis.getTop();
|
|
top += oThis.parentControl.getTop();
|
|
let bottom = afterItems[i+1] ? oThis.getTop() + afterItems[i+1].getTop() : oThis.getBottom();
|
|
bottom += oThis.parentControl.getTop();
|
|
|
|
graphics.drawVerLine(align, x, top, bottom, oThis.getPenWidth(graphics));
|
|
}
|
|
|
|
graphics.RestoreGrState();
|
|
|
|
function ms_to_mm(nMilliseconds) {
|
|
const index = Asc.editor.WordControl.m_oAnimPaneApi.timeline.Control.timeline.timeScaleIndex;
|
|
return nMilliseconds * TIME_INTERVALS[index] / TIME_SCALES[index] / 1000;
|
|
}
|
|
}
|
|
|
|
|
|
function CAnimItem(oParentControl, oEffect) {
|
|
CControlContainer.call(this, oParentControl);
|
|
this.effect = oEffect;
|
|
|
|
if (this.effect.isClickEffect() || !this.effect.getPreviousEffect()) {
|
|
this.indexLabel = this.addControl(new CLabel(this, this.effect.getIndexInSequence() + "", INDEX_LABEL_FONTSIZE, false, AscCommon.align_Center))
|
|
}
|
|
|
|
// Event type image
|
|
const eventImg = this.getEventImage();
|
|
this.eventTypeImage = this.addControl(new CImageControl(this, eventImg.src, eventImg.width, eventImg.height));
|
|
|
|
// Effect type image
|
|
const effectImg = this.getEffectImage();
|
|
this.effectTypeImage = this.addControl(new CImageControl(this, effectImg.src, effectImg.width, effectImg.height));
|
|
|
|
this.effectLabel = this.addControl(new CLabel(this, this.getEffectLabelText(), EFFECT_LABEL_FONTSIZE, false, AscCommon.align_Left));
|
|
this.contextMenuButton = this.addControl(new CButton(this, function (e, x, y) {
|
|
if (this.hit(x, y) && (e.Button === AscCommon.g_mouse_button_left)) {
|
|
this.pressedFlag = true;
|
|
}
|
|
}, null, showContextMenu));
|
|
this.contextMenuButton.icon = this.contextMenuButton.addControl(new CImageControl(
|
|
this.contextMenuButton,
|
|
AscCommon.GlobalSkin.type == 'light' ? menuButtonIcon_dark : menuButtonIcon_light,
|
|
10 * AscCommon.g_dKoef_pix_to_mm, 2 * AscCommon.g_dKoef_pix_to_mm /* 10x2 svg image */
|
|
));
|
|
|
|
this.contextMenuButton.sendContextMenuEvent = function (customX, customY) {
|
|
const coords = editor.WordControl.m_oDrawingDocument.ConvertAnimPaneCoordsToCursor(
|
|
AscFormat.isRealNumber(customX) ? customX : this.bounds.l,
|
|
(AscFormat.isRealNumber(customY) ? customY : this.bounds.t) + HEADER_HEIGHT - editor.WordControl.m_oAnimPaneApi.list.Scroll * g_dKoef_pix_to_mm
|
|
);
|
|
|
|
const data = new AscCommonSlide.CContextMenuData()
|
|
data.Type = Asc.c_oAscContextMenuTypes.AnimEffect;
|
|
data.X_abs = coords.X;
|
|
data.Y_abs = coords.Y;
|
|
if (!AscFormat.isRealNumber(customX)) {
|
|
data.ButtonWidth = (this.bounds.r - this.bounds.l) * g_dKoef_mm_to_pix;
|
|
}
|
|
if (!AscFormat.isRealNumber(customY)) {
|
|
data.ButtonHeight = (this.bounds.b - this.bounds.t) * g_dKoef_mm_to_pix;
|
|
}
|
|
data.EffectStartType = this.parentControl.effect.getNodeType();
|
|
|
|
editor.sync_ContextMenuCallback(data);
|
|
}
|
|
|
|
function showContextMenu(e, x, y) {
|
|
if (this.hit(x, y) && !this.isHidden()) {
|
|
if (this.pressedFlag) {
|
|
this.sendContextMenuEvent();
|
|
this.pressedFlag = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Temp fields for effect bar movement
|
|
this.tmpDelay = null;
|
|
this.tmpDuration = null;
|
|
this.tmpRepeatCount = null;
|
|
|
|
// Callback functions for effect bar events
|
|
this.onMouseDownCallback = function (event, x, y) {
|
|
if (!this.hit(x, y)) { return }
|
|
|
|
if (!this.contextMenuButton.hit(x, y)) {
|
|
this.updateSelectState(event);
|
|
}
|
|
|
|
const hitRes = this.hitInEffectBar(x, y);
|
|
if (hitRes) {
|
|
this.hitResult = hitRes;
|
|
this.tmpDelay = this.getDelay();
|
|
this.tmpDuration = this.getDuration();
|
|
|
|
if (this.effect.isUntilEffect() && hitRes.type === 'right') {
|
|
this.tmpRepeatCount = this.getRepeatCount();
|
|
this.initialTmpRepeatCount = this.tmpRepeatCount;
|
|
}
|
|
|
|
this.onUpdate();
|
|
}
|
|
}
|
|
this.onMouseMoveCallback = function (event, x, y) {
|
|
if (this.hit(x, y)) {
|
|
this.updateCursorType(x, y);
|
|
}
|
|
|
|
if (!this.hitResult) { return }
|
|
this.handleMovement(x, y);
|
|
this.handleScrollCondition(x, y);
|
|
|
|
this.onUpdate();
|
|
}
|
|
this.onMouseUpCallback = function (event, x, y) {
|
|
if (this.hit(x, y)) {
|
|
if (event.Button === AscCommon.g_mouse_button_right) {
|
|
this.contextMenuButton.sendContextMenuEvent(x, y);
|
|
}
|
|
}
|
|
|
|
if (!this.hitResult) { return }
|
|
this.setNewEffectParams(this.tmpDelay, this.tmpDuration, this.tmpRepeatCount);
|
|
this.hitResult = this.tmpDelay = this.tmpDuration = this.tmpRepeatCount = null;
|
|
|
|
this.onUpdate()
|
|
}
|
|
}
|
|
|
|
InitClass(CAnimItem, CControlContainer, CONTROL_TYPE_ANIM_ITEM);
|
|
|
|
CAnimItem.prototype.recalculateChildrenLayout = function () {
|
|
const oSeqLst = this.getSeqList();
|
|
const nIndexLabelWidth = oSeqLst ? oSeqLst.getIndexLabelWidth() : 0;
|
|
if (this.indexLabel) this.indexLabel.setLayout(0, 0, nIndexLabelWidth, ANIM_ITEM_HEIGHT)
|
|
|
|
this.eventTypeImage.setLayout(nIndexLabelWidth, 0, EVENT_TYPE_ICON_SIZE, EVENT_TYPE_ICON_SIZE);
|
|
this.effectTypeImage.src = this.getEffectImage().src;
|
|
this.effectTypeImage.setLayout(this.eventTypeImage.getRight(), 0, EFFECT_TYPE_ICON_SIZE, EFFECT_TYPE_ICON_SIZE);
|
|
|
|
const zeroPos = COMMON_LEFT_MARGIN + SCALE_BUTTON_LEFT_MARGIN + SCALE_BUTTON_WIDTH + TIMELINE_SCROLL_LEFT_MARGIN + TIMELINE_SCROLL_BUTTON_SIZE;
|
|
const labelWidth = zeroPos - COMMON_LEFT_MARGIN - (nIndexLabelWidth + EVENT_TYPE_ICON_SIZE + EFFECT_TYPE_ICON_SIZE);
|
|
const gap = (ANIM_ITEM_HEIGHT - EFFECT_BAR_HEIGHT) / 2;
|
|
this.effectLabel.setLayout(this.effectTypeImage.getRight(), gap, labelWidth, EFFECT_BAR_HEIGHT);
|
|
|
|
const menuBtnGap = (ANIM_ITEM_HEIGHT - MENU_BUTTON_SIZE) / 2;
|
|
const menuBtnLeft = this.getRight() - MENU_BUTTON_SIZE - menuBtnGap;
|
|
this.contextMenuButton.setLayout(menuBtnLeft, menuBtnGap, MENU_BUTTON_SIZE, MENU_BUTTON_SIZE);
|
|
|
|
this.contextMenuButton.icon.src = AscCommon.GlobalSkin.type == 'light' ? menuButtonIcon_dark : menuButtonIcon_light;
|
|
this.contextMenuButton.icon.setLayout(0, 0, MENU_BUTTON_SIZE, MENU_BUTTON_SIZE);
|
|
};
|
|
CAnimItem.prototype.getEventImage = function () {
|
|
let eventImg = {};
|
|
if (this.effect.isClickEffect()) {
|
|
eventImg.src = clickEffectIcon;
|
|
eventImg.width = 11 * AscCommon.g_dKoef_pix_to_mm;
|
|
eventImg.height = 16 * AscCommon.g_dKoef_pix_to_mm;
|
|
}
|
|
if (this.effect.isAfterEffect()) {
|
|
eventImg.src = afterEffectIcon;
|
|
eventImg.width = 16 * AscCommon.g_dKoef_pix_to_mm;
|
|
eventImg.height = 16 * AscCommon.g_dKoef_pix_to_mm;
|
|
}
|
|
return eventImg;
|
|
};
|
|
CAnimItem.prototype.getEffectImage = function () {
|
|
let effectImg = {};
|
|
if (this.effect.cTn.presetClass === AscFormat.PRESET_CLASS_ENTR) {
|
|
effectImg.src = entrEffectIcon;
|
|
effectImg.width = 20 * AscCommon.g_dKoef_pix_to_mm;
|
|
effectImg.height = 20 * AscCommon.g_dKoef_pix_to_mm;
|
|
}
|
|
if (this.effect.cTn.presetClass === AscFormat.PRESET_CLASS_EMPH) {
|
|
effectImg.src = emphEffectIcon;
|
|
effectImg.width = 20 * AscCommon.g_dKoef_pix_to_mm;
|
|
effectImg.height = 20 * AscCommon.g_dKoef_pix_to_mm;
|
|
}
|
|
if (this.effect.cTn.presetClass === AscFormat.PRESET_CLASS_EXIT) {
|
|
effectImg.src = exitEffectIcon;
|
|
effectImg.width = 20 * AscCommon.g_dKoef_pix_to_mm;
|
|
effectImg.height = 20 * AscCommon.g_dKoef_pix_to_mm;
|
|
}
|
|
if (this.effect.cTn.presetClass === AscFormat.PRESET_CLASS_PATH) {
|
|
effectImg.src = AscCommon.GlobalSkin.type === 'light' ? pathEffectIcon_dark : pathEffectIcon_light;
|
|
effectImg.width = 20 * AscCommon.g_dKoef_pix_to_mm;
|
|
effectImg.height = 20 * AscCommon.g_dKoef_pix_to_mm;
|
|
}
|
|
return effectImg;
|
|
};
|
|
CAnimItem.prototype.updateSelectState = function (event) {
|
|
const oThis = this;
|
|
const seqList = Asc.editor.WordControl.m_oAnimPaneApi.list.Control.seqList;
|
|
if (event.Button === AscCommon.g_mouse_button_right && !oThis.effect.isSelected()) {
|
|
seqList.forEachAnimItem(function (animItem) {
|
|
animItem.effect === oThis.effect ? animItem.effect.select() : animItem.effect.deselect();
|
|
})
|
|
}
|
|
if (event.Button === AscCommon.g_mouse_button_left) {
|
|
if (event.CtrlKey) {
|
|
oThis.effect.toggleSelect();
|
|
} else {
|
|
seqList.forEachAnimItem(function (animItem) {
|
|
animItem.effect === oThis.effect ? animItem.effect.select() : animItem.effect.deselect();
|
|
})
|
|
}
|
|
}
|
|
Asc.editor.WordControl.m_oLogicDocument.RedrawCurSlide();
|
|
Asc.editor.WordControl.m_oLogicDocument.Document_UpdateInterfaceState();
|
|
}
|
|
CAnimItem.prototype.updateCursorType = function (x, y) {
|
|
const cursorType = this.getNewCursorType(x, y);
|
|
const mouseMoveData = this.getMouseMoveData(x, y);
|
|
|
|
const animPane = Asc.editor.WordControl.m_oAnimPaneApi;
|
|
animPane.SetCursorType(cursorType, mouseMoveData);
|
|
animPane.sentMouseMoveData = mouseMoveData;
|
|
}
|
|
CAnimItem.prototype.getNewCursorType = function (x, y) {
|
|
const isVerticalDrag = null !== editor.WordControl.m_oAnimPaneApi.list.Control.seqList.nPressedSlot;
|
|
if (isVerticalDrag) {
|
|
return 'grabbing';
|
|
}
|
|
|
|
let draggingAnimItem;
|
|
editor.WordControl.m_oAnimPaneApi.list.Control.seqList.forEachAnimItem(function (animItem) {
|
|
if (animItem.hitResult) {
|
|
draggingAnimItem = animItem;
|
|
}
|
|
});
|
|
|
|
const hitRes = draggingAnimItem
|
|
? draggingAnimItem.hitResult
|
|
: (this.hitResult || this.hitInEffectBar(x, y));
|
|
|
|
const cursorTypes = {
|
|
'left': 'col-resize',
|
|
'right': 'col-resize',
|
|
'partition': 'col-resize',
|
|
'center': 'ew-resize'
|
|
};
|
|
const cursorType = hitRes
|
|
? cursorTypes[hitRes.type]
|
|
: this.contextMenuButton.hit(x, y) ? 'default' : 'ns-resize';
|
|
return cursorType;
|
|
};
|
|
CAnimItem.prototype.getMouseMoveData = function (x, y) {
|
|
const coords = editor.WordControl.m_oDrawingDocument.ConvertAnimPaneCoordsToCursor(
|
|
x, y + HEADER_HEIGHT - editor.WordControl.m_oAnimPaneApi.list.Scroll * g_dKoef_pix_to_mm
|
|
);
|
|
|
|
const mouseMoveData = new CMouseMoveData();
|
|
mouseMoveData.X_abs = coords.X;
|
|
mouseMoveData.Y_abs = coords.Y;
|
|
|
|
const isVerticalDrag = null !== editor.WordControl.m_oAnimPaneApi.list.Control.seqList.nPressedSlot;
|
|
if (!this.contextMenuButton.hit(x, y) && !isVerticalDrag) {
|
|
mouseMoveData.Type = Asc.c_oAscMouseMoveDataTypes.EffectInfo;
|
|
const tooltipInfo = this.getInfoForTooltip(x, y);
|
|
if (typeof tooltipInfo === 'string') {
|
|
mouseMoveData.EffectText = tooltipInfo;
|
|
} else {
|
|
mouseMoveData.EffectDescription = tooltipInfo;
|
|
}
|
|
}
|
|
|
|
return mouseMoveData;
|
|
};
|
|
CAnimItem.prototype.getInfoForTooltip = function (x, y) {
|
|
// If there is a pressed animItem - we take the information from it,
|
|
// otherwise - from this one (literally 'this' xd)
|
|
let currentAnimItem = this;
|
|
const seqList = editor.WordControl.m_oAnimPaneApi.list.Control.seqList
|
|
seqList.forEachAnimItem(function (animItem) {
|
|
if (animItem.hitResult) { currentAnimItem = animItem; }
|
|
})
|
|
|
|
const templateStrings = {
|
|
startTime: AscCommon.translateManager.getValue('Start: ${0}s'),
|
|
endTime: AscCommon.translateManager.getValue('End: ${0}s'),
|
|
loopTime: AscCommon.translateManager.getValue('Loop: ${0}s'),
|
|
};
|
|
|
|
// When dragging (when animItem's bar is pressed)
|
|
if (currentAnimItem.hitResult) {
|
|
let time;
|
|
switch (currentAnimItem.hitResult.type) {
|
|
case 'center':
|
|
time = currentAnimItem.getDelay() / 1000;
|
|
return templateStrings.startTime.replace('${0}', time.toFixed(1));
|
|
case 'left':
|
|
time = currentAnimItem.getDelay() / 1000;
|
|
return templateStrings.startTime.replace('${0}', time.toFixed(1));
|
|
case 'right':
|
|
time = currentAnimItem.getDelay() / 1000 + currentAnimItem.getDuration() / 1000;
|
|
return templateStrings.endTime.replace('${0}', time.toFixed(1));
|
|
case 'partition':
|
|
time = (currentAnimItem.getDuration() / 1000);
|
|
return templateStrings.loopTime.replace('${0}', time.toFixed(1));
|
|
}
|
|
}
|
|
|
|
if (currentAnimItem.hitInEffectBar(x, y)) {
|
|
const startTime = (currentAnimItem.getDelay() / 1000).toFixed(1);
|
|
const endTime = ((currentAnimItem.getDelay() + currentAnimItem.getDuration()) / 1000).toFixed(1);
|
|
const result = [
|
|
templateStrings.startTime.replace('${0}', startTime),
|
|
templateStrings.endTime.replace('${0}', endTime),
|
|
];
|
|
return result.join(', ');
|
|
} else {
|
|
// Belongs to [AscFormat.NODE_TYPE_AFTEREFFECT, AscFormat.NODE_TYPE_CLICKEFFECT, AscFormat.NODE_TYPE_WITHEFFECT]
|
|
const eventType = currentAnimItem.effect.getNodeType();
|
|
// Belongs to [AscFormat.PRESET_CLASS_ENTR, AscFormat.PRESET_CLASS_EMPH, AscFormat.PRESET_CLASS_EXIT, AscFormat.PRESET_CLASS_PATH]
|
|
const presetClass = currentAnimItem.effect.cTn.presetClass;
|
|
// Belongs to presets of animation - [AscFormat.ENTRANCE_APPEAR, ..., AscFormat.EMPHASIS_FILL_COLOR, ...]
|
|
const presetId = currentAnimItem.effect.cTn.presetID;
|
|
const shapeName = currentAnimItem.effect.getObjectName();
|
|
return [eventType, presetClass, presetId, shapeName];
|
|
}
|
|
}
|
|
CAnimItem.prototype.getEffectLabelText = function () {
|
|
const objectName = this.effect.getObjectName();
|
|
const objectText = this.effect.getObjectText();
|
|
return objectText ? (objectName + ': ' + objectText) : objectName;
|
|
};
|
|
CAnimItem.prototype.handleScrollCondition = function (x, y) {
|
|
const leftBorder = this.getLeftBorder();
|
|
const rightBorder = this.getRightBorder();
|
|
|
|
const timeline = Asc.editor.WordControl.m_oAnimPaneApi.timeline.Control.timeline;
|
|
if (x <= leftBorder || x >= rightBorder) {
|
|
if (!timeline.isOnScroll()) {
|
|
let scrollStep = timeline.getWidth() * SCROLL_STEP / 10;
|
|
scrollStep = x <= leftBorder ? -scrollStep : scrollStep;
|
|
let scrollTimerDelay = 0;
|
|
let scrollTimerInterval = 50;
|
|
timeline.startScroll(scrollStep, scrollTimerDelay, scrollTimerInterval);
|
|
}
|
|
} else timeline.endScroll();
|
|
}
|
|
CAnimItem.prototype.handleMovement = function (x, y) {
|
|
const timeline = Asc.editor.WordControl.m_oAnimPaneApi.timeline.Control.timeline;
|
|
const timelineShift = this.ms_to_mm(timeline.getStartTime() * 1000);
|
|
const repeats = this.getRepeatCount() / 1000;
|
|
|
|
let pointOfLanding = x - this.getLeftBorder() + timelineShift;
|
|
|
|
if (this.hitResult.type === 'right') {
|
|
if (this.effect.isUntilEffect()) {
|
|
const pointOfContact = this.ms_to_mm(this.effect.getFullDelay() + this.effect.asc_getDuration() * this.initialTmpRepeatCount / 1000);
|
|
let diff = this.mm_to_ms(pointOfLanding - pointOfContact);
|
|
|
|
const newTmpRepeatCount = this.initialTmpRepeatCount + diff / (this.effect.asc_getDuration() / 1000);
|
|
this.tmpRepeatCount = Math.max(newTmpRepeatCount, MIN_ALLOWED_REPEAT_COUNT);
|
|
} else {
|
|
const pointOfContact = this.ms_to_mm(this.effect.getFullDelay() + this.effect.asc_getDuration() * repeats);
|
|
let diff = this.mm_to_ms(pointOfLanding - pointOfContact);
|
|
|
|
const newTmpDuration = this.effect.asc_getDuration() + diff / repeats;
|
|
this.tmpDuration = Math.max(MIN_ALLOWED_DURATION, newTmpDuration);
|
|
}
|
|
}
|
|
|
|
if (this.hitResult.type === 'left') {
|
|
const pointOfContact = this.ms_to_mm(this.effect.getFullDelay());
|
|
const basePoint = this.ms_to_mm(this.effect.getBaseTime());
|
|
pointOfLanding = Math.max(pointOfLanding, basePoint);
|
|
const diff = this.mm_to_ms(pointOfLanding - pointOfContact);
|
|
|
|
const newTmpDuration = this.effect.asc_getDuration() - diff / repeats;
|
|
const newTmpDelay = this.effect.getFullDelay() + diff;
|
|
|
|
const maxNewTmpDuration = this.effect.getFullDelay() / repeats + this.effect.asc_getDuration();
|
|
const maxNewTmpDelay = this.effect.getFullDelay() + (this.effect.asc_getDuration() - MIN_ALLOWED_DURATION) * repeats;
|
|
|
|
if (this.effect.isUntilEffect()) {
|
|
this.tmpDelay = Math.max(newTmpDelay, this.effect.getBaseTime());
|
|
} else {
|
|
this.tmpDuration = Math.min(Math.max(newTmpDuration, MIN_ALLOWED_DURATION), maxNewTmpDuration);
|
|
this.tmpDelay = Math.min(Math.max(newTmpDelay, this.effect.getBaseTime()), maxNewTmpDelay);
|
|
}
|
|
}
|
|
|
|
if (this.hitResult.type === 'center') {
|
|
const pointOfContact = this.ms_to_mm(this.effect.getFullDelay()) + this.hitResult.offset;
|
|
const diff = this.mm_to_ms(pointOfLanding - pointOfContact);
|
|
|
|
const newTmpDelay = this.effect.getFullDelay() + diff;
|
|
this.tmpDelay = Math.max(newTmpDelay, this.effect.getBaseTime());
|
|
}
|
|
|
|
if (this.hitResult.type === 'partition') {
|
|
const pointOfContact = this.ms_to_mm(this.effect.getFullDelay() + this.effect.asc_getDuration() * this.hitResult.index);
|
|
const diff = this.mm_to_ms(pointOfLanding - pointOfContact);
|
|
|
|
const newTmpDuration = this.effect.asc_getDuration() + diff / this.hitResult.index;
|
|
this.tmpDuration = Math.max(MIN_ALLOWED_DURATION, newTmpDuration);
|
|
}
|
|
}
|
|
CAnimItem.prototype.handleTimelineScroll = function (step) {
|
|
if (!this.hitResult) { return }
|
|
|
|
const repeats = this.getRepeatCount() / 1000;
|
|
const diff = this.mm_to_ms(step);
|
|
let newTmpDelay;
|
|
let newTmpDuration;
|
|
let newTmpRepeatCount;
|
|
switch (this.hitResult.type) {
|
|
case 'center':
|
|
newTmpDelay = this.tmpDelay + diff;
|
|
this.tmpDelay = Math.max(newTmpDelay, this.effect.getBaseTime());
|
|
break;
|
|
|
|
case 'right':
|
|
if (this.effect.isUntilEffect()) {
|
|
newTmpRepeatCount = this.tmpRepeatCount + diff / (this.effect.asc_getDuration() / 1000);
|
|
this.tmpRepeatCount = Math.max(newTmpRepeatCount, MIN_ALLOWED_REPEAT_COUNT);
|
|
} else {
|
|
newTmpDuration = this.tmpDuration + diff / repeats;
|
|
this.tmpDuration = Math.max(MIN_ALLOWED_DURATION, newTmpDuration);
|
|
}
|
|
break;
|
|
|
|
case 'left':
|
|
newTmpDuration = this.tmpDuration - diff / repeats;
|
|
newTmpDelay = this.tmpDelay + diff;
|
|
|
|
const maxNewTmpDuration = (this.effect.getFullDelay() - this.effect.getBaseTime()) / repeats + this.effect.asc_getDuration();
|
|
const maxNewTmpDelay = this.effect.getFullDelay() + (this.effect.asc_getDuration() - MIN_ALLOWED_DURATION) * repeats;
|
|
|
|
if (this.effect.isUntilEffect()) {
|
|
this.tmpDelay = Math.max(newTmpDelay, this.effect.getBaseTime());
|
|
} else {
|
|
this.tmpDuration = Math.min(Math.max(newTmpDuration, MIN_ALLOWED_DURATION), maxNewTmpDuration);
|
|
this.tmpDelay = Math.min(Math.max(newTmpDelay, this.effect.getBaseTime()), maxNewTmpDelay);
|
|
}
|
|
break;
|
|
|
|
case 'partition':
|
|
newTmpDuration = this.tmpDuration + diff / this.hitResult.index;
|
|
this.tmpDuration = Math.max(MIN_ALLOWED_DURATION, newTmpDuration);
|
|
break;
|
|
}
|
|
|
|
this.onUpdate();
|
|
}
|
|
|
|
CAnimItem.prototype.ms_to_mm = function (nMilliseconds) {
|
|
if (nMilliseconds === null || nMilliseconds === undefined) { return }
|
|
|
|
const index = Asc.editor.WordControl.m_oAnimPaneApi.timeline.Control.timeline.timeScaleIndex;
|
|
return nMilliseconds * TIME_INTERVALS[index] / TIME_SCALES[index] / 1000;
|
|
};
|
|
CAnimItem.prototype.mm_to_ms = function (nMillimeters) {
|
|
if (nMillimeters === null || nMillimeters === undefined) { return }
|
|
|
|
const index = Asc.editor.WordControl.m_oAnimPaneApi.timeline.Control.timeline.timeScaleIndex;
|
|
return nMillimeters / TIME_INTERVALS[index] * TIME_SCALES[index] * 1000;
|
|
};
|
|
|
|
CAnimItem.prototype.getDelay = function () {
|
|
return this.tmpDelay !== null ? this.tmpDelay : this.effect.getFullDelay();
|
|
}
|
|
CAnimItem.prototype.getDuration = function () {
|
|
return this.tmpDuration !== null ? this.tmpDuration : this.effect.asc_getDuration()
|
|
}
|
|
CAnimItem.prototype.getRepeatCount = function () {
|
|
if (this.tmpRepeatCount !== null) { return this.tmpRepeatCount; }
|
|
else if (this.effect.asc_getRepeatCount() > 0) { return this.effect.asc_getRepeatCount(); }
|
|
else {
|
|
const bounds = this.getEffectBarBounds();
|
|
const width = bounds.r - bounds.l;
|
|
const totalWidth = this.getRightBorder() - bounds.l;
|
|
return (totalWidth / width * 1000) >> 0; // approximate repeat counter
|
|
}
|
|
}
|
|
|
|
CAnimItem.prototype.getLeftBorder = function () {
|
|
const timeline = Asc.editor.WordControl.m_oAnimPaneApi.timeline.Control.timeline;
|
|
return timeline.getLeft() + timeline.getZeroShift();
|
|
}
|
|
CAnimItem.prototype.getRightBorder = function () {
|
|
const timeline = Asc.editor.WordControl.m_oAnimPaneApi.timeline.Control.timeline;
|
|
return timeline.getRight() - TIMELINE_SCROLL_BUTTON_SIZE;
|
|
}
|
|
CAnimItem.prototype.getEffectBarBounds = function () {
|
|
const timeline = Asc.editor.WordControl.m_oAnimPaneApi.timeline.Control.timeline;
|
|
const timelineShift = timeline.getStartTime() * 1000;
|
|
|
|
let l = this.ms_to_mm(this.getDelay()) + this.getLeftBorder() - this.ms_to_mm(timelineShift);
|
|
|
|
let r = l + this.ms_to_mm(this.getDuration());
|
|
|
|
let t = this.bounds.t + (ANIM_ITEM_HEIGHT - EFFECT_BAR_HEIGHT) / 2;
|
|
|
|
let b = t + EFFECT_BAR_HEIGHT;
|
|
|
|
if (this.effect.isInstantEffect()) {
|
|
return { l: l, r: l + EFFECT_BAR_HEIGHT, t: t, b: b }
|
|
}
|
|
|
|
return { l: l, r: r, t: t, b: b }
|
|
};
|
|
|
|
CAnimItem.prototype.draw = function drawEffectBar(graphics) {
|
|
const timelineContainer = Asc.editor.WordControl.m_oAnimPaneApi.timeline.Control
|
|
if (!timelineContainer) { return }
|
|
|
|
this.effect.isSelected() ? this.contextMenuButton.show() : this.contextMenuButton.hide();
|
|
|
|
if (!CControlContainer.prototype.draw.call(this, graphics)) { return false }
|
|
if (this.isHidden()) { return false }
|
|
if (!this.checkUpdateRect(graphics.updatedRect)) { return false }
|
|
|
|
graphics.SaveGrState();
|
|
|
|
const clipL = this.getLeftBorder();
|
|
const clipT = this.bounds.t;
|
|
const clipW = this.getRightBorder() - clipL;
|
|
const clipH = this.bounds.b - this.bounds.t;
|
|
graphics.AddClipRect(clipL, clipT, clipW, clipH);
|
|
|
|
const oSkin = AscCommon.GlobalSkin;
|
|
let sFillColor, sOutlineColor;
|
|
switch (this.effect.cTn.presetClass) {
|
|
case AscFormat.PRESET_CLASS_ENTR:
|
|
sFillColor = oSkin.AnimPaneEffectBarFillEntrance;
|
|
sOutlineColor = oSkin.AnimPaneEffectBarOutlineEntrance;
|
|
break;
|
|
|
|
case AscFormat.PRESET_CLASS_EMPH:
|
|
sFillColor = oSkin.AnimPaneEffectBarFillEmphasis;
|
|
sOutlineColor = oSkin.AnimPaneEffectBarOutlineEmphasis;
|
|
break;
|
|
|
|
case AscFormat.PRESET_CLASS_EXIT:
|
|
sFillColor = oSkin.AnimPaneEffectBarFillExit;
|
|
sOutlineColor = oSkin.AnimPaneEffectBarOutlineExit;
|
|
break;
|
|
|
|
case AscFormat.PRESET_CLASS_PATH:
|
|
sFillColor = oSkin.AnimPaneEffectBarFillPath;
|
|
sOutlineColor = oSkin.AnimPaneEffectBarOutlinePath;
|
|
break;
|
|
|
|
default:
|
|
sFillColor = '#A0A0A0';
|
|
sOutlineColor = '#404040';
|
|
}
|
|
|
|
// hex to rgba
|
|
const oFillColorRGBA = AscCommon.RgbaHexToRGBA(sFillColor);
|
|
const oOutlineColorRGBA = AscCommon.RgbaHexToRGBA(sOutlineColor);
|
|
|
|
// rgba to CShapeColor
|
|
let oFillColor = new AscFormat.CShapeColor(oFillColorRGBA.R, oFillColorRGBA.G, oFillColorRGBA.B);
|
|
let oOutlineColor = new AscFormat.CShapeColor(oOutlineColorRGBA.R, oOutlineColorRGBA.G, oOutlineColorRGBA.B);
|
|
|
|
// change brightness of CShapeColor during demo preview
|
|
if (Asc.editor.asc_IsStartedAnimationPreview()) {
|
|
if (!this.isCurrentlyPlaying) {
|
|
oFillColor = oFillColor.getColorData(0.4);
|
|
oOutlineColor = oOutlineColor.getColorData(0.4);
|
|
}
|
|
}
|
|
|
|
graphics.b_color1(oFillColor.r, oFillColor.g, oFillColor.b, 255);
|
|
graphics.p_color(oOutlineColor.r, oOutlineColor.g, oOutlineColor.b, 255);
|
|
|
|
const bounds = this.getEffectBarBounds();
|
|
if (this.effect.isInstantEffect()) {
|
|
// In case we need to draw a triangle
|
|
|
|
let transform = graphics.m_oFullTransform;
|
|
let left = (transform.TransformPointX(bounds.l, bounds.t) + 0.5) >> 0;
|
|
let top = (transform.TransformPointY(bounds.l, bounds.t) + 0.5) >> 0;
|
|
let right = (transform.TransformPointX(bounds.r, bounds.t) + 0.5) >> 0;
|
|
let bottom = (transform.TransformPointY(bounds.l, bounds.b) + 0.5) >> 0;
|
|
|
|
let ctx = graphics.m_oContext;
|
|
ctx.beginPath();
|
|
ctx.moveTo(left, top);
|
|
ctx.lineTo(left + 5, top);
|
|
ctx.lineTo(right, top + (bottom - top) / 2);
|
|
ctx.lineTo(left + 5, bottom);
|
|
ctx.lineTo(left, bottom);
|
|
ctx.lineTo(left, top);
|
|
graphics.df();
|
|
graphics.ds();
|
|
} else {
|
|
let repeats;
|
|
if (this.effect.isUntilEffect() && this.tmpRepeatCount === null) {
|
|
// In case we need to draw an infinite bar with an arrow
|
|
|
|
const barWidth = Math.max(this.getRightBorder() - bounds.l - EFFECT_BAR_HEIGHT, this.ms_to_mm(MIN_ALLOWED_DURATION));
|
|
// repeats = barWidth / (bounds.r - bounds.l);
|
|
repeats = this.getRepeatCount() / 1000;
|
|
|
|
let transform = graphics.m_oFullTransform;
|
|
let left = (transform.TransformPointX(bounds.l, bounds.t) + 0.5) >> 0;
|
|
let top = (transform.TransformPointY(bounds.l, bounds.t) + 0.5) >> 0;
|
|
let right = (transform.TransformPointX(bounds.l + barWidth, bounds.t) + 0.5) >> 0;
|
|
let bottom = (transform.TransformPointY(bounds.l, bounds.b) + 0.5) >> 0;
|
|
|
|
let ctx = graphics.m_oContext;
|
|
ctx.beginPath();
|
|
ctx.moveTo(left, top);
|
|
ctx.lineTo(right, top);
|
|
ctx.lineTo(right + 5, top);
|
|
ctx.lineTo(right + EFFECT_BAR_HEIGHT * g_dKoef_mm_to_pix, top + (bottom - top) / 2);
|
|
ctx.lineTo(right + 5, bottom);
|
|
ctx.lineTo(right, bottom);
|
|
ctx.lineTo(left, bottom);
|
|
ctx.lineTo(left, top);
|
|
|
|
graphics.df();
|
|
graphics.ds();
|
|
|
|
// renew clipRect to clip marks
|
|
graphics.RemoveClipRect();
|
|
graphics.AddClipRect(clipL, clipT, clipW - EFFECT_BAR_HEIGHT, clipH);
|
|
} else {
|
|
// In case we need to draw a bar
|
|
|
|
repeats = this.getRepeatCount() / 1000;
|
|
const barWidth = (bounds.r - bounds.l) * repeats;
|
|
graphics.rect(bounds.l, bounds.t, barWidth, bounds.b - bounds.t);
|
|
|
|
graphics.df();
|
|
graphics.ds();
|
|
}
|
|
|
|
// draw marks
|
|
if ((bounds.r - bounds.l) >= 2 * g_dKoef_pix_to_mm) {
|
|
const gap = (bounds.b - bounds.t) / 5;
|
|
for (let markIndex = 1; markIndex < repeats; markIndex++) {
|
|
const xCord = bounds.l + markIndex * (bounds.r - bounds.l)
|
|
graphics.drawVerLine(2, xCord, bounds.t + gap, bounds.b - gap, this.getPenWidth(graphics));
|
|
}
|
|
}
|
|
}
|
|
|
|
graphics.RestoreGrState();
|
|
};
|
|
CAnimItem.prototype.hitInEffectBar = function (x, y) {
|
|
if (!this.hit(x, y)) { return null; }
|
|
|
|
const bounds = this.getEffectBarBounds();
|
|
const isOutOfBorders = x < this.getLeftBorder() || x > this.getRightBorder() || y < bounds.t || y > bounds.b
|
|
if (isOutOfBorders) { return null; }
|
|
|
|
const width = bounds.r - bounds.l;
|
|
const repeats = this.getRepeatCount() / 1000;
|
|
const delta = AscFormat.DIST_HIT_IN_LINE / 2
|
|
|
|
let barRight = this.effect.isUntilEffect() ? this.getRightBorder() : bounds.l + width * repeats;
|
|
barRight = Math.max(bounds.l + this.ms_to_mm(MIN_ALLOWED_DURATION), barRight);
|
|
|
|
if (!this.effect.isInstantEffect()) {
|
|
if (x >= bounds.l - delta && x <= bounds.l + delta) {
|
|
return { type: 'left' };
|
|
}
|
|
|
|
if (this.effect.isUntilEffect()) {
|
|
if (x >= barRight - EFFECT_BAR_HEIGHT - delta && x <= barRight + delta) {
|
|
return { type: 'right' };
|
|
}
|
|
} else {
|
|
if (x >= barRight - delta && x <= barRight + delta) {
|
|
return { type: 'right' };
|
|
}
|
|
}
|
|
|
|
const partitionIndex = (x - bounds.l) / width >> 0;
|
|
// if effect isUntilEffect condition (partitionIndex < repeats) doesnt matter
|
|
if (partitionIndex > 0 && (this.effect.isUntilEffect() || partitionIndex < repeats)) {
|
|
const partitionPos = bounds.l + partitionIndex * width;
|
|
if (x <= partitionPos + delta && x >= partitionPos - delta) {
|
|
return { type: 'partition', index: partitionIndex };
|
|
}
|
|
}
|
|
}
|
|
|
|
if (x > bounds.l && x < barRight) {
|
|
return { type: 'center', offset: x - bounds.l };
|
|
}
|
|
|
|
return null;
|
|
};
|
|
CAnimItem.prototype.hit = function (x, y) {
|
|
const headerY = y + HEADER_HEIGHT - editor.WordControl.m_oAnimPaneApi.list.Scroll * g_dKoef_pix_to_mm
|
|
if (editor.WordControl.m_oAnimPaneApi.header.Control.hit(x, headerY)) {
|
|
return false;
|
|
}
|
|
|
|
if (this.parentControl && !this.parentControl.hit(x, y)) { return false; }
|
|
|
|
const oInv = this.invertTransform;
|
|
const tx = oInv.TransformPointX(x, y);
|
|
const ty = oInv.TransformPointY(x, y);
|
|
|
|
if (tx >= 0 && tx <= this.extX) {
|
|
if (ty >= 0 && ty <= this.extY / 2) { return 'top' }
|
|
if (ty > this.extY / 2 && ty <= this.extY) { return 'bottom' }
|
|
}
|
|
return false;
|
|
};
|
|
|
|
CAnimItem.prototype.setNewEffectParams = function (newDelay, newDuration, newRepeatCount) {
|
|
const minAllowedDelta = 1 // in ms
|
|
let dOwnNewDelay = newDelay - this.effect.getBaseTime();
|
|
const delayDiff = Math.abs(dOwnNewDelay - this.effect.asc_getDelay());
|
|
const durationDiff = Math.abs(newDuration - this.effect.asc_getDuration());
|
|
const repeatCountDiff = Math.abs(newRepeatCount - this.effect.asc_getRepeatCount());
|
|
|
|
const effectCopy = AscFormat.ExecuteNoHistory(function () {
|
|
let oCopy = this.effect.createDuplicate();
|
|
oCopy.merge(this.effect);
|
|
return oCopy;
|
|
}, this, []);
|
|
|
|
if (dOwnNewDelay !== null && dOwnNewDelay !== undefined && delayDiff >= minAllowedDelta) {
|
|
effectCopy.asc_putDelay(dOwnNewDelay);
|
|
}
|
|
if (newDuration !== null && newDuration !== undefined && durationDiff >= minAllowedDelta) {
|
|
effectCopy.asc_putDuration(newDuration);
|
|
}
|
|
if (newRepeatCount !== null && newRepeatCount !== undefined && repeatCountDiff >= 1) {
|
|
effectCopy.asc_putRepeatCount(newRepeatCount);
|
|
}
|
|
|
|
if (this.effect.isEqualProperties(effectCopy)) { return }
|
|
Asc.editor.WordControl.m_oLogicDocument.SetAnimationProperties(effectCopy, false);
|
|
};
|
|
|
|
CAnimItem.prototype.onMouseDown = function (e, x, y) {
|
|
if (this.onMouseDownCallback && this.onMouseDownCallback.call(this, e, x, y)) {
|
|
return true;
|
|
}
|
|
return CControlContainer.prototype.onMouseDown.call(this, e, x, y);
|
|
};
|
|
CAnimItem.prototype.onMouseMove = function (e, x, y) {
|
|
if (this.onMouseMoveCallback && this.onMouseMoveCallback.call(this, e, x, y)) {
|
|
return true;
|
|
}
|
|
return CControlContainer.prototype.onMouseMove.call(this, e, x, y);
|
|
};
|
|
CAnimItem.prototype.onMouseUp = function (e, x, y) {
|
|
if (this.onMouseUpCallback && this.onMouseUpCallback.call(this, e, x, y)) {
|
|
return true;
|
|
}
|
|
return CControlContainer.prototype.onMouseUp.call(this, e, x, y);
|
|
};
|
|
CAnimItem.prototype.canHandleEvents = function () {
|
|
return true;
|
|
};
|
|
CAnimItem.prototype.getFillColor = function() {
|
|
const oSkin = AscCommon.GlobalSkin;
|
|
if (this.effect.isSelected()) { return oSkin.AnimPaneItemFillSelected; }
|
|
if (this.isHovered()) { return oSkin.AnimPaneItemFillHovered; }
|
|
return null;
|
|
};
|
|
|
|
|
|
// HEADER
|
|
const HEADER_HEIGHT = 40 * AscCommon.g_dKoef_pix_to_mm;
|
|
const HEADER_LABEL_FONTSIZE = 10;
|
|
const HEADER_LABEL_WIDTH = 101 * AscCommon.g_dKoef_pix_to_mm;
|
|
|
|
const PLAY_BUTTON_HEIGHT = 24 * AscCommon.g_dKoef_pix_to_mm;
|
|
const PLAY_BUTTON_LEFT_MARGIN = 30 * AscCommon.g_dKoef_pix_to_mm;
|
|
const PLAY_BUTTON_LEFT_PADDING = 8 * AscCommon.g_dKoef_pix_to_mm;
|
|
const PLAY_BUTTON_RIGHT_PADDING = 12 * AscCommon.g_dKoef_pix_to_mm;
|
|
const PLAY_BUTTON_ICON_SIZE = 20 * AscCommon.g_dKoef_pix_to_mm;;
|
|
const PLAY_BUTTON_LABEL_FONTSIZE = 9;
|
|
const PLAY_BUTTON_MAX_LABEL_WIDTH = 100 * g_dKoef_pix_to_mm;
|
|
const PLAY_BUTTON_LABEL_LEFT_MARGIN = 4 * AscCommon.g_dKoef_pix_to_mm;
|
|
|
|
const MOVE_BUTTON_SIZE = 24 * AscCommon.g_dKoef_pix_to_mm;
|
|
const MOVE_UP_BUTTON_LEFT_MARGIN = 14 * AscCommon.g_dKoef_pix_to_mm;
|
|
const MOVE_DOWN_BUTTON_LEFT_MARGIN = 4 * AscCommon.g_dKoef_pix_to_mm;
|
|
|
|
const CLOSE_BUTTON_SIZE = 24 * AscCommon.g_dKoef_pix_to_mm;
|
|
|
|
|
|
// TIMELINE
|
|
const TIMELINE_HEIGHT = 40 * AscCommon.g_dKoef_pix_to_mm;
|
|
const TIMELINE_SCROLL_HEIGHT = 17 * AscCommon.g_dKoef_pix_to_mm;
|
|
const TIMELINE_SCROLL_ABSOLUTE_LEFT = 143 * AscCommon.g_dKoef_pix_to_mm;
|
|
const TIMELINE_SCROLL_LEFT_MARGIN = 10 * AscCommon.g_dKoef_pix_to_mm;
|
|
const TIMELINE_SCROLL_RIGHT_MARGIN = 40 * AscCommon.g_dKoef_pix_to_mm;
|
|
const TIMELINE_SCROLL_BUTTON_SIZE = 17 * AscCommon.g_dKoef_pix_to_mm;
|
|
const TIMELINE_SCROLLER_WIDTH = 16 * AscCommon.g_dKoef_pix_to_mm;
|
|
|
|
const ZOOM_BUTTON_SIZE = 20 * AscCommon.g_dKoef_pix_to_mm;
|
|
const ZOOM_LABEL_FONTSIZE = 9;
|
|
const ZOOM_LABEL_WIDTH = 80 * AscCommon.g_dKoef_pix_to_mm;
|
|
const ZOOM_LABEL_MARGIN = 5 * AscCommon.g_dKoef_pix_to_mm;
|
|
|
|
const SCALE_BUTTON_WIDTH = 76 * AscCommon.g_dKoef_pix_to_mm;
|
|
const SCALE_BUTTON_LEFT_MARGIN = 43 * AscCommon.g_dKoef_pix_to_mm;
|
|
|
|
const TIMELINE_LABEL_WIDTH = 100;
|
|
const TIMELINE_LABEL_FONTSIZE = 7.5;
|
|
|
|
const SCROLL_TIMER_INTERVAL = 150;
|
|
const SCROLL_TIMER_DELAY = 600;
|
|
const SCROLL_STEP = 0.26
|
|
|
|
const TIME_SCALES = [0.25, 1, 1, 2, 5, 10, 20, 60, 120, 300, 600, 600]; // in seconds
|
|
|
|
const SMALL_TIME_INTERVAL = 15;
|
|
const MIDDLE_1_TIME_INTERVAL = 20;
|
|
const MIDDLE_2_TIME_INTERVAL = 25;
|
|
const LONG_TIME_INTERVAL = 30;
|
|
|
|
const TIME_INTERVALS = [
|
|
SMALL_TIME_INTERVAL,
|
|
LONG_TIME_INTERVAL, //1
|
|
SMALL_TIME_INTERVAL, //1
|
|
SMALL_TIME_INTERVAL, //2
|
|
MIDDLE_1_TIME_INTERVAL, //5
|
|
MIDDLE_1_TIME_INTERVAL,//10
|
|
MIDDLE_1_TIME_INTERVAL,//20
|
|
MIDDLE_2_TIME_INTERVAL,//60
|
|
MIDDLE_2_TIME_INTERVAL,//120
|
|
MIDDLE_2_TIME_INTERVAL,//300
|
|
MIDDLE_2_TIME_INTERVAL,//600
|
|
SMALL_TIME_INTERVAL//600
|
|
]; // in mms
|
|
|
|
|
|
// SEQUENCE LIST
|
|
const SEQ_LABEL_MARGIN = 3;
|
|
const SEQ_LABEL_HEIGHT = 15 * AscCommon.g_dKoef_pix_to_mm;
|
|
|
|
const ANIM_ITEM_HEIGHT = 24 * AscCommon.g_dKoef_pix_to_mm;
|
|
|
|
const INDEX_LABEL_FONTSIZE = 7.5;
|
|
const INDEX_LABEL_WIDTH = 19 * AscCommon.g_dKoef_pix_to_mm;
|
|
const EVENT_TYPE_ICON_SIZE = ANIM_ITEM_HEIGHT;
|
|
const EFFECT_TYPE_ICON_SIZE = ANIM_ITEM_HEIGHT;
|
|
const EFFECT_LABEL_FONTSIZE = 7.5;
|
|
const EFFECT_BAR_HEIGHT = ANIM_ITEM_HEIGHT * 5 / 8;
|
|
const MENU_BUTTON_SIZE = 15 * AscCommon.g_dKoef_pix_to_mm;
|
|
|
|
const MIN_ALLOWED_DURATION = 10; // milliseconds
|
|
const MIN_ALLOWED_REPEAT_COUNT = 10; // equals 0.01 of full effect duration
|
|
|
|
|
|
// COMMON
|
|
const COMMON_LEFT_MARGIN = 14 * AscCommon.g_dKoef_pix_to_mm;
|
|
const COMMON_RIGHT_MARGIN = 20 * AscCommon.g_dKoef_pix_to_mm;
|
|
// const ALIGNMENT_LINE = MATH.max(CLOSE_BUTTON_SIZE, MENU_BUTTON_SIZE, TIMELINE_SCROLL_BUTTON_SIZE) / 2;
|
|
|
|
|
|
// ICONS
|
|
const playIcon_dark = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yIDEwTDEwIDVMMiAtNC43NjgzN2UtMDdWMTBaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K';
|
|
const playIcon_light = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yIDEwTDEwIDVMMiAtNC43NjgzN2UtMDdWMTBaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K';
|
|
const stopIcon_dark = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K';
|
|
const stopIcon_light = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K';
|
|
|
|
const clickEffectIcon = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxMiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIgMC41SDEwQzEwLjgyODQgMC41IDExLjUgMS4xNzE1NyAxMS41IDJWMTJDMTEuNSAxMy45MzMgOS45MzMgMTUuNSA4IDE1LjVINEMyLjA2NyAxNS41IDAuNSAxMy45MzMgMC41IDEyVjJDMC41IDEuMTcxNTcgMS4xNzE1NyAwLjUgMiAwLjVaIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSIjNDQ0NDQ0Ii8+CjxyZWN0IHg9IjUiIHk9IjIiIHdpZHRoPSIyIiBoZWlnaHQ9IjQiIGZpbGw9IiM0NDQ0NDQiLz4KPC9zdmc+Cg==';
|
|
const afterEffectIcon = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMTUuNUMxMi4xNDIxIDE1LjUgMTUuNSAxMi4xNDIxIDE1LjUgOEMxNS41IDMuODU3ODYgMTIuMTQyMSAwLjUgOCAwLjVDMy44NTc4NiAwLjUgMC41IDMuODU3ODYgMC41IDhDMC41IDEyLjE0MjEgMy44NTc4NiAxNS41IDggMTUuNVoiIGZpbGw9IndoaXRlIiBzdHJva2U9IiM0NDQ0NDQiLz4KPHBhdGggZD0iTTExIDguNUg3IiBzdHJva2U9IiM0NDQ0NDQiLz4KPHBhdGggZD0iTTcuNSA0VjkiIHN0cm9rZT0iIzQ0NDQ0NCIvPgo8L3N2Zz4K';
|
|
|
|
const entrEffectIcon = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMCAxLjAwMDAyQzkuNzExNjQgMC45OTgxNDIgOS40MjIyNSAxLjE2Mjk3IDkuMzE0NTQgMS40OTQ0OUw3LjM3MDc5IDcuNTIzNDZDNy4yOTE4MyA3Ljc2NjQ3IDcuMDkxMzIgNy45NDQ4IDYuODQ5NjkgOEgxLjcxN0MxLjAyMzc1IDggMC43MzU1MTYgOC44ODcxIDEuMjk2MzYgOS4yOTQ1OEw1LjgyNzIyIDEyLjQ4NzlDNS43ODMzMiAxMi42NjA5IDUuNzMxNzEgMTIuODQwMyA1LjY3MTI5IDEzLjAyNjJMNC4wMzcyOCAxOC4wNTUyQzMuODIzMDUgMTguNzE0NSA0LjU3NzY3IDE5LjI2MjggNS4xMzg1MiAxOC44NTUzTDEwIDE1LjQyODlMMTQuODYxNSAxOC44NTUzQzE1LjQyMjMgMTkuMjYyOCAxNi4xNzY5IDE4LjcxNDUgMTUuOTYyNyAxOC4wNTUyTDE0LjMyODcgMTMuMDI2MkMxNC4yNjgzIDEyLjg0MDMgMTQuMjE2NyAxMi42NjA5IDE0LjE3MjggMTIuNDg3OUwxOC43MDM2IDkuMjk0NThDMTkuMjY0NSA4Ljg4NzEgMTguOTc2MiA4IDE4LjI4MyA4SDEzLjE1MDNDMTIuOTA4NyA3Ljk0NDggMTIuNzA4MiA3Ljc2NjQ3IDEyLjYyOTIgNy41MjM0NkwxMC42ODU1IDEuNDk0NDlDMTAuNTc3NyAxLjE2Mjk3IDEwLjI4ODQgMC45OTgxNDIgMTAgMS4wMDAwMlpNMTAgMi42MDAzMUM5LjMwMDY2IDQuNzM5NDYgNy44MTc1MSA5LjAwMDAxIDcuODE3NTEgOS4wMDAwMUgyLjYwMDFMNy4wMDAxIDEyLjFDNi42MTQ0OSAxMy40NDk2IDYuMTcxNzMgMTQuNzQ0OCA1LjcyMjY5IDE2LjA1ODRDNS41NDg0NSAxNi41NjgxIDUuMzczMjYgMTcuMDgwNSA1LjIwMDEgMTcuNkwxMCAxNC4yMzIyTDE0Ljc5OTkgMTcuNkMxNC42MjY3IDE3LjA4MDYgMTQuNDUxNiAxNi41NjgxIDE0LjI3NzMgMTYuMDU4NUMxMy44MjgzIDE0Ljc0NDkgMTMuMzg1NSAxMy40NDk2IDEyLjk5OTkgMTIuMUwxNy4zOTk5IDkuMDAwMDFIMTIuMTgyNUMxMi4xODI1IDkuMDAwMDEgMTAuNjk5MyA0LjczOTQ2IDEwIDIuNjAwMzFaIiBmaWxsPSIjMEU4QTI2Ii8+CjxwYXRoIG9wYWNpdHk9IjAuNSIgZD0iTTcuODE3NTEgOS4wMDAyOUM3LjgxNzUxIDkuMDAwMjkgOS4zMDA2NiA0LjczOTc0IDEwIDIuNjAwNTlDMTAuNjk5MyA0LjczOTc0IDEyLjE4MjUgOS4wMDAyOSAxMi4xODI1IDkuMDAwMjlIMTcuMzk5OUwxMi45OTk5IDEyLjEwMDNDMTMuMzg1NSAxMy40NDk5IDEzLjgyODMgMTQuNzQ1MSAxNC4yNzczIDE2LjA1ODdDMTQuNDUxNiAxNi41NjgzIDE0LjYyNjcgMTcuMDgwOCAxNC43OTk5IDE3LjYwMDNMMTAgMTQuMjMyNUw1LjIwMDEgMTcuNjAwM0M1LjM3MzI2IDE3LjA4MDggNS41NDg0NCAxNi41NjgzIDUuNzIyNjggMTYuMDU4N0M2LjE3MTczIDE0Ljc0NTEgNi42MTQ0OSAxMy40NDk5IDcuMDAwMSAxMi4xMDAzTDIuNjAwMSA5LjAwMDI5SDcuODE3NTFaIiBmaWxsPSIjMEU4QTI2Ii8+CjxyZWN0IHg9IjMiIHk9IjIiIHdpZHRoPSI0IiBoZWlnaHQ9IjEiIGZpbGw9IiMwRThBMjYiLz4KPHJlY3QgeD0iMSIgeT0iNSIgd2lkdGg9IjQiIGhlaWdodD0iMSIgZmlsbD0iIzBFOEEyNiIvPgo8cmVjdCB4PSIxIiB5PSIxMiIgd2lkdGg9IjMiIGhlaWdodD0iMSIgZmlsbD0iIzBFOEEyNiIvPgo8cmVjdCB4PSIxIiB5PSIxNSIgd2lkdGg9IjIiIGhlaWdodD0iMSIgZmlsbD0iIzBFOEEyNiIvPgo8L3N2Zz4K';
|
|
const emphEffectIcon = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMCAxLjAwMDAyQzkuNzExNjQgMC45OTgxNDIgOS40MjIyNSAxLjE2Mjk3IDkuMzE0NTQgMS40OTQ0OUw3LjM3MDc5IDcuNTIzNDZDNy4yOTE4MyA3Ljc2NjQ3IDcuMDkxMzIgNy45NDQ4IDYuODQ5NjkgOEgxLjcxN0MxLjAyMzc1IDggMC43MzU1MTYgOC44ODcxIDEuMjk2MzYgOS4yOTQ1OEw1LjgyNzIyIDEyLjQ4NzlDNS43ODMzMiAxMi42NjA5IDUuNzMxNzEgMTIuODQwMyA1LjY3MTI5IDEzLjAyNjJMNC4wMzcyOCAxOC4wNTUyQzMuODIzMDUgMTguNzE0NSA0LjU3NzY3IDE5LjI2MjggNS4xMzg1MiAxOC44NTUzTDEwIDE1LjQyODlMMTQuODYxNSAxOC44NTUzQzE1LjQyMjMgMTkuMjYyOCAxNi4xNzY5IDE4LjcxNDUgMTUuOTYyNyAxOC4wNTUyTDE0LjMyODcgMTMuMDI2MkMxNC4yNjgzIDEyLjg0MDMgMTQuMjE2NyAxMi42NjA5IDE0LjE3MjggMTIuNDg3OUwxOC43MDM2IDkuMjk0NThDMTkuMjY0NSA4Ljg4NzEgMTguOTc2MiA4IDE4LjI4MyA4SDEzLjE1MDNDMTIuOTA4NyA3Ljk0NDggMTIuNzA4MiA3Ljc2NjQ3IDEyLjYyOTIgNy41MjM0NkwxMC42ODU1IDEuNDk0NDlDMTAuNTc3NyAxLjE2Mjk3IDEwLjI4ODQgMC45OTgxNDIgMTAgMS4wMDAwMlpNMTAgMi42MDAzMUM5LjMwMDY2IDQuNzM5NDYgNy44MTc1MSA5LjAwMDAxIDcuODE3NTEgOS4wMDAwMUgyLjYwMDFMNy4wMDAxIDEyLjFDNi42MTQ0OSAxMy40NDk2IDYuMTcxNzMgMTQuNzQ0OCA1LjcyMjY5IDE2LjA1ODRDNS41NDg0NSAxNi41NjgxIDUuMzczMjYgMTcuMDgwNSA1LjIwMDEgMTcuNkwxMCAxNC4yMzIyTDE0Ljc5OTkgMTcuNkMxNC42MjY3IDE3LjA4MDYgMTQuNDUxNiAxNi41NjgxIDE0LjI3NzMgMTYuMDU4NUMxMy44MjgzIDE0Ljc0NDkgMTMuMzg1NSAxMy40NDk2IDEyLjk5OTkgMTIuMUwxNy4zOTk5IDkuMDAwMDFIMTIuMTgyNUMxMi4xODI1IDkuMDAwMDEgMTAuNjk5MyA0LjczOTQ2IDEwIDIuNjAwMzFaIiBmaWxsPSIjRkY4RTAwIi8+CjxwYXRoIG9wYWNpdHk9IjAuNSIgZD0iTTcuODE3NTEgOS4wMDAyOUM3LjgxNzUxIDkuMDAwMjkgOS4zMDA2NiA0LjczOTc0IDEwIDIuNjAwNTlDMTAuNjk5MyA0LjczOTc0IDEyLjE4MjUgOS4wMDAyOSAxMi4xODI1IDkuMDAwMjlIMTcuMzk5OUwxMi45OTk5IDEyLjEwMDNDMTMuMzg1NSAxMy40NDk5IDEzLjgyODMgMTQuNzQ1MSAxNC4yNzczIDE2LjA1ODdDMTQuNDUxNiAxNi41NjgzIDE0LjYyNjcgMTcuMDgwOCAxNC43OTk5IDE3LjYwMDNMMTAgMTQuMjMyNUw1LjIwMDEgMTcuNjAwM0M1LjM3MzI2IDE3LjA4MDggNS41NDg0NCAxNi41NjgzIDUuNzIyNjggMTYuMDU4N0M2LjE3MTczIDE0Ljc0NTEgNi42MTQ0OSAxMy40NDk5IDcuMDAwMSAxMi4xMDAzTDIuNjAwMSA5LjAwMDI5SDcuODE3NTFaIiBmaWxsPSIjRkY4RTAwIi8+CjxwYXRoIGQ9Ik01Ljg5NDU4IDYuMTkzMzZMMi4zOTQ1OCAxLjY5MzM2TDEuNjA1MjIgMi4zMDczTDUuMTA1MjIgNi44MDczTDUuODk0NTggNi4xOTMzNloiIGZpbGw9IiNGRjhFMDAiLz4KPHBhdGggZD0iTTEuODUzNTkgMTUuODUzOUw0LjM1MzU5IDEzLjM1MzlMMy42NDY0OCAxMi42NDY4TDEuMTQ2NDggMTUuMTQ2OEwxLjg1MzU5IDE1Ljg1MzlaIiBmaWxsPSIjRkY4RTAwIi8+CjxwYXRoIGQ9Ik0xNC4xNDY0IDYuMTkzMzZMMTcuNjQ2NCAxLjY5MzM2TDE4LjQzNTggMi4zMDczTDE0LjkzNTggNi44MDczTDE0LjE0NjQgNi4xOTMzNloiIGZpbGw9IiNGRjhFMDAiLz4KPHBhdGggZD0iTTE4LjE4NzQgMTUuODUzOUwxNS42ODc0IDEzLjM1MzlMMTYuMzk0NSAxMi42NDY4TDE4Ljg5NDUgMTUuMTQ2OEwxOC4xODc0IDE1Ljg1MzlaIiBmaWxsPSIjRkY4RTAwIi8+Cjwvc3ZnPgo=';
|
|
const exitEffectIcon = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMCAxLjAwMDAyQzkuNzExNjQgMC45OTgxNDIgOS40MjIyNSAxLjE2Mjk3IDkuMzE0NTQgMS40OTQ0OUw3LjM3MDc5IDcuNTIzNDZDNy4yOTE4MyA3Ljc2NjQ3IDcuMDkxMzIgNy45NDQ4IDYuODQ5NjkgOEgxLjcxN0MxLjAyMzc1IDggMC43MzU1MTYgOC44ODcxIDEuMjk2MzYgOS4yOTQ1OEw1LjgyNzIyIDEyLjQ4NzlDNS43ODMzMiAxMi42NjA5IDUuNzMxNzEgMTIuODQwMyA1LjY3MTI5IDEzLjAyNjJMNC4wMzcyOCAxOC4wNTUyQzMuODIzMDUgMTguNzE0NSA0LjU3NzY3IDE5LjI2MjggNS4xMzg1MiAxOC44NTUzTDEwIDE1LjQyODlMMTQuODYxNSAxOC44NTUzQzE1LjQyMjMgMTkuMjYyOCAxNi4xNzY5IDE4LjcxNDUgMTUuOTYyNyAxOC4wNTUyTDE0LjMyODcgMTMuMDI2MkMxNC4yNjgzIDEyLjg0MDMgMTQuMjE2NyAxMi42NjA5IDE0LjE3MjggMTIuNDg3OUwxOC43MDM2IDkuMjk0NThDMTkuMjY0NSA4Ljg4NzEgMTguOTc2MiA4IDE4LjI4MyA4SDEzLjE1MDNDMTIuOTA4NyA3Ljk0NDggMTIuNzA4MiA3Ljc2NjQ3IDEyLjYyOTIgNy41MjM0NkwxMC42ODU1IDEuNDk0NDlDMTAuNTc3NyAxLjE2Mjk3IDEwLjI4ODQgMC45OTgxNDIgMTAgMS4wMDAwMlpNMTAgMi42MDAzMUM5LjMwMDY2IDQuNzM5NDYgNy44MTc1MSA5LjAwMDAxIDcuODE3NTEgOS4wMDAwMUgyLjYwMDFMNy4wMDAxIDEyLjFDNi42MTQ0OSAxMy40NDk2IDYuMTcxNzMgMTQuNzQ0OCA1LjcyMjY5IDE2LjA1ODRDNS41NDg0NSAxNi41NjgxIDUuMzczMjYgMTcuMDgwNSA1LjIwMDEgMTcuNkwxMCAxNC4yMzIyTDE0Ljc5OTkgMTcuNkMxNC42MjY3IDE3LjA4MDYgMTQuNDUxNiAxNi41NjgxIDE0LjI3NzMgMTYuMDU4NUMxMy44MjgzIDE0Ljc0NDkgMTMuMzg1NSAxMy40NDk2IDEyLjk5OTkgMTIuMUwxNy4zOTk5IDkuMDAwMDFIMTIuMTgyNUMxMi4xODI1IDkuMDAwMDEgMTAuNjk5MyA0LjczOTQ2IDEwIDIuNjAwMzFaIiBmaWxsPSIjRjIzRDNEIi8+CjxwYXRoIG9wYWNpdHk9IjAuNSIgZD0iTTcuODE3NTEgOS4wMDAyOUM3LjgxNzUxIDkuMDAwMjkgOS4zMDA2NiA0LjczOTc0IDEwIDIuNjAwNTlDMTAuNjk5MyA0LjczOTc0IDEyLjE4MjUgOS4wMDAyOSAxMi4xODI1IDkuMDAwMjlIMTcuMzk5OUwxMi45OTk5IDEyLjEwMDNDMTMuMzg1NSAxMy40NDk5IDEzLjgyODMgMTQuNzQ1MSAxNC4yNzczIDE2LjA1ODdDMTQuNDUxNiAxNi41NjgzIDE0LjYyNjcgMTcuMDgwOCAxNC43OTk5IDE3LjYwMDNMMTAgMTQuMjMyNUw1LjIwMDEgMTcuNjAwM0M1LjM3MzI2IDE3LjA4MDggNS41NDg0NCAxNi41NjgzIDUuNzIyNjggMTYuMDU4N0M2LjE3MTczIDE0Ljc0NTEgNi42MTQ0OSAxMy40NDk5IDcuMDAwMSAxMi4xMDAzTDIuNjAwMSA5LjAwMDI5SDcuODE3NTFaIiBmaWxsPSIjRjIzRDNEIi8+CjxwYXRoIGQ9Ik0xMyAySDE3VjNIMTNWMloiIGZpbGw9IiNGMjNEM0QiLz4KPHBhdGggZD0iTTE1IDZWNUgxOVY2SDE1WiIgZmlsbD0iI0YyM0QzRCIvPgo8cGF0aCBkPSJNMTkgMTJIMTZWMTNIMTlWMTJaIiBmaWxsPSIjRjIzRDNEIi8+CjxwYXRoIGQ9Ik0xNyAxNUgxOVYxNkgxN1YxNVoiIGZpbGw9IiNGMjNEM0QiLz4KPC9zdmc+Cg==';
|
|
const pathEffectIcon_light = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuOTk2NzUgMS41MDAwMUw5Ljk5Njc1IDEuNTAwMDVMMTAuMDAzMiAxLjUwMDAxQzEwLjA1MjUgMS40OTk2OSAxMC4wOTcgMS41MTM4IDEwLjEzMDQgMS41MzY0QzEwLjE2MDUgMS41NTY3NSAxMC4xOTA1IDEuNTg5NjEgMTAuMjA5OCAxLjY0ODU4QzEwLjIwOTggMS42NDg3MiAxMC4yMDk5IDEuNjQ4ODYgMTAuMjA5OSAxLjY0ODk5TDEyLjE1MzMgNy42NzY4OUwxMi4xNTM3IDcuNjc3OTdDMTIuMjg3OSA4LjA5MDk3IDEyLjYyODYgOC4zOTM2OSAxMy4wMzg5IDguNDg3NDRMMTMuMDkzOSA4LjVIMTMuMTUwM0gxOC4yODNDMTguNDkxIDguNSAxOC41NzggOC43NjUwNCAxOC40MTE5IDguODg4NTFMMTMuODg0NyAxMi4wNzkzTDEzLjYwMzUgMTIuMjc3NEwxMy42ODgxIDEyLjYxMDlDMTMuNzM0OCAxMi43OTQ2IDEzLjc4OTQgMTIuOTg0NSAxMy44NTMyIDEzLjE4MDhMMTUuNDg3MiAxOC4yMDk3QzE1LjU1MTcgMTguNDA4NCAxNS4zMjQ0IDE4LjU3MzYgMTUuMTU1NCAxOC40NTA4TDE1LjE1NTQgMTguNDUwOEwxNS4xNDk1IDE4LjQ0NjZMMTAuMjg4IDE1LjAyMDJMMTAgMTQuODE3Mkw5LjcxMTk1IDE1LjAyMDJMNC44NTA0NyAxOC40NDY2TDQuODUwNDQgMTguNDQ2Nkw0Ljg0NDYyIDE4LjQ1MDhDNC42NzU2NCAxOC41NzM2IDQuNDQ4MjYgMTguNDA4NCA0LjUxMjgxIDE4LjIwOTdMNi4xNDY4MiAxMy4xODA4QzYuMjEwNTggMTIuOTg0NSA2LjI2NTI0IDEyLjc5NDYgNi4zMTE4NiAxMi42MTA5TDYuMzk2NDcgMTIuMjc3NEw2LjExNTI2IDEyLjA3OTNMMS41ODgxNSA4Ljg4ODUzQzEuNDIyIDguNzY1MDYgMS41MDg5OSA4LjUgMS43MTcgOC41SDYuODQ5NjlINi45MDYwOEw2Ljk2MTA1IDguNDg3NDRDNy4zNzE0MyA4LjM5MzY5IDcuNzEyMTMgOC4wOTA5NyA3Ljg0NjMyIDcuNjc3OTdMNy44NDY2NyA3LjY3Njg5TDkuNzkwMDcgMS42NDg5OUM5Ljc5MDExIDEuNjQ4ODYgOS43OTAxNSAxLjY0ODcyIDkuNzkwMiAxLjY0ODU5QzkuODA5NDUgMS41ODk2MSA5LjgzOTU0IDEuNTU2NzYgOS44Njk2MyAxLjUzNjRDOS45MDMwNSAxLjUxMzggOS45NDc1NCAxLjQ5OTY5IDkuOTk2NzUgMS41MDAwMVoiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS1vcGFjaXR5PSIwLjgiLz4KPHBhdGggZD0iTTEyIDNDMTIgNC4xMDQ1NyAxMS4xMDQ2IDUgMTAgNUM4Ljg5NTQzIDUgOCA0LjEwNDU3IDggM0M4IDEuODk1NDMgOC44OTU0MyAxIDEwIDFDMTEuMTA0NiAxIDEyIDEuODk1NDMgMTIgM1oiIGZpbGw9IiMzQUJENTkiLz4KPHBhdGggZD0iTTkgN0M5IDguMTA0NTcgOC4xMDQ1NyA5IDcgOUM1Ljg5NTQzIDkgNSA4LjEwNDU3IDUgN0M1IDUuODk1NDMgNS44OTU0MyA1IDcgNUM4LjEwNDU3IDUgOSA1Ljg5NTQzIDkgN1oiIGZpbGw9IiNGNTJDMkMiLz4KPC9zdmc+Cg==';
|
|
const pathEffectIcon_dark = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuOTk2NzUgMS41MDAwMUw5Ljk5Njc1IDEuNTAwMDVMMTAuMDAzMiAxLjUwMDAxQzEwLjA1MjUgMS40OTk2OSAxMC4wOTcgMS41MTM4IDEwLjEzMDQgMS41MzY0QzEwLjE2MDUgMS41NTY3NSAxMC4xOTA1IDEuNTg5NjEgMTAuMjA5OCAxLjY0ODU4QzEwLjIwOTggMS42NDg3MiAxMC4yMDk5IDEuNjQ4ODYgMTAuMjA5OSAxLjY0ODk5TDEyLjE1MzMgNy42NzY4OUwxMi4xNTM3IDcuNjc3OTdDMTIuMjg3OSA4LjA5MDk3IDEyLjYyODYgOC4zOTM2OSAxMy4wMzg5IDguNDg3NDRMMTMuMDkzOSA4LjVIMTMuMTUwM0gxOC4yODNDMTguNDkxIDguNSAxOC41NzggOC43NjUwNCAxOC40MTE5IDguODg4NTFMMTMuODg0NyAxMi4wNzkzTDEzLjYwMzUgMTIuMjc3NEwxMy42ODgxIDEyLjYxMDlDMTMuNzM0OCAxMi43OTQ2IDEzLjc4OTQgMTIuOTg0NSAxMy44NTMyIDEzLjE4MDhMMTUuNDg3MiAxOC4yMDk3QzE1LjU1MTcgMTguNDA4NCAxNS4zMjQ0IDE4LjU3MzYgMTUuMTU1NCAxOC40NTA4TDE1LjE1NTQgMTguNDUwOEwxNS4xNDk1IDE4LjQ0NjZMMTAuMjg4IDE1LjAyMDJMMTAgMTQuODE3Mkw5LjcxMTk1IDE1LjAyMDJMNC44NTA0NyAxOC40NDY2TDQuODUwNDQgMTguNDQ2Nkw0Ljg0NDYyIDE4LjQ1MDhDNC42NzU2NCAxOC41NzM2IDQuNDQ4MjYgMTguNDA4NCA0LjUxMjgxIDE4LjIwOTdMNi4xNDY4MiAxMy4xODA4QzYuMjEwNTggMTIuOTg0NSA2LjI2NTI0IDEyLjc5NDYgNi4zMTE4NiAxMi42MTA5TDYuMzk2NDcgMTIuMjc3NEw2LjExNTI2IDEyLjA3OTNMMS41ODgxNSA4Ljg4ODUzQzEuNDIyIDguNzY1MDYgMS41MDg5OSA4LjUgMS43MTcgOC41SDYuODQ5NjlINi45MDYwOEw2Ljk2MTA1IDguNDg3NDRDNy4zNzE0MyA4LjM5MzY5IDcuNzEyMTMgOC4wOTA5NyA3Ljg0NjMyIDcuNjc3OTdMNy44NDY2NyA3LjY3Njg5TDkuNzkwMDcgMS42NDg5OUM5Ljc5MDExIDEuNjQ4ODYgOS43OTAxNSAxLjY0ODcyIDkuNzkwMiAxLjY0ODU5QzkuODA5NDUgMS41ODk2MSA5LjgzOTU0IDEuNTU2NzYgOS44Njk2MyAxLjUzNjRDOS45MDMwNSAxLjUxMzggOS45NDc1NCAxLjQ5OTY5IDkuOTk2NzUgMS41MDAwMVoiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS1vcGFjaXR5PSIwLjgiLz4KPHBhdGggZD0iTTEyIDNDMTIgNC4xMDQ1NyAxMS4xMDQ2IDUgMTAgNUM4Ljg5NTQzIDUgOCA0LjEwNDU3IDggM0M4IDEuODk1NDMgOC44OTU0MyAxIDEwIDFDMTEuMTA0NiAxIDEyIDEuODk1NDMgMTIgM1oiIGZpbGw9IiMwRThBMjYiLz4KPHBhdGggZD0iTTkgN0M5IDguMTA0NTcgOC4xMDQ1NyA5IDcgOUM1Ljg5NTQzIDkgNSA4LjEwNDU3IDUgN0M1IDUuODk1NDMgNS44OTU0MyA1IDcgNUM4LjEwNDU3IDUgOSA1Ljg5NTQzIDkgN1oiIGZpbGw9IiNGMjNEM0QiLz4KPC9zdmc+Cg==';
|
|
|
|
const arrowUpIcon_dark = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEyIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNS45OTk5NiAwLjI5Mjg1NUw1LjY0NjQxIDAuNjQ2NDA4TDAuMTQ2NDA4IDYuMTQ2NDFMMC44NTM1MTYgNi44NTM1MUw1Ljk5OTk2IDEuNzA3MDdMMTEuMTQ2NCA2Ljg1MzUyTDExLjg1MzUgNi4xNDY0MUw2LjM1MzUyIDAuNjQ2NDA5TDUuOTk5OTYgMC4yOTI4NTVaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K';
|
|
const arrowUpIcon_light = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEyIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNS45OTk5NiAwLjI5Mjg1NUw1LjY0NjQxIDAuNjQ2NDA4TDAuMTQ2NDA4IDYuMTQ2NDFMMC44NTM1MTYgNi44NTM1MUw1Ljk5OTk2IDEuNzA3MDdMMTEuMTQ2NCA2Ljg1MzUyTDExLjg1MzUgNi4xNDY0MUw2LjM1MzUyIDAuNjQ2NDA5TDUuOTk5OTYgMC4yOTI4NTVaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K';
|
|
|
|
const arrowDownIcon_dark = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEyIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNi4wMDAwNCA2LjcwNzE0TDYuMzUzNTkgNi4zNTM1OUwxMS44NTM2IDAuODUzNTkxTDExLjE0NjUgMC4xNDY0ODRMNi4wMDAwNCA1LjI5MjkzTDAuODUzNTkxIDAuMTQ2NDg0TDAuMTQ2NDg0IDAuODUzNTkxTDUuNjQ2NDggNi4zNTM1OUw2LjAwMDA0IDYuNzA3MTRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K';
|
|
const arrowDownIcon_light = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEyIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNi4wMDAwNCA2LjcwNzE0TDYuMzUzNTkgNi4zNTM1OUwxMS44NTM2IDAuODUzNTkxTDExLjE0NjUgMC4xNDY0ODRMNi4wMDAwNCA1LjI5MjkzTDAuODUzNTkxIDAuMTQ2NDg0TDAuMTQ2NDg0IDAuODUzNTkxTDUuNjQ2NDggNi4zNTM1OUw2LjAwMDA0IDYuNzA3MTRaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K';
|
|
|
|
const closeIcon_dark = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEgMUwxMSAxMU0xMSAxTDEgMTEiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMS41Ii8+Cjwvc3ZnPgo=';
|
|
const closeIcon_light = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEgMUwxMSAxMU0xMSAxTDEgMTEiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS41Ii8+Cjwvc3ZnPgo=';
|
|
|
|
const menuButtonIcon_dark = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04IDFDOCAwLjQ0NzcxNSA4LjQ0NzcyIDguMjg1MmUtMDggOSAxLjMxMTM0ZS0wN0M5LjU1MjI4IDEuNzk0MTdlLTA3IDEwIDAuNDQ3NzE2IDEwIDFDMTAgMS41NTIyOCA5LjU1MjI4IDIgOSAyQzguNDQ3NzIgMiA4IDEuNTUyMjggOCAxWiIgZmlsbD0iYmxhY2siLz4KPHBhdGggZD0iTTQgMUM0IDAuNDQ3NzE1IDQuNDQ3NzIgLTIuNjY4MzllLTA3IDUgLTIuMTg1NTdlLTA3QzUuNTUyMjkgLTEuNzAyNzVlLTA3IDYgMC40NDc3MTUgNiAxQzYgMS41NTIyOCA1LjU1MjI5IDIgNSAyQzQuNDQ3NzIgMiA0IDEuNTUyMjggNCAxWiIgZmlsbD0iYmxhY2siLz4KPHBhdGggZD0iTTEgMy44NTQyNmUtMDdDMC40NDc3MTYgMy4zNzE0NGUtMDcgLTEuOTU3MDNlLTA4IDAuNDQ3NzE2IC00LjM3MTE0ZS0wOCAxQy02Ljc4NTI2ZS0wOCAxLjU1MjI4IDAuNDQ3NzE2IDIgMSAyQzEuNTUyMjkgMiAyIDEuNTUyMjkgMiAxQzIgMC40NDc3MTYgMS41NTIyOSA0LjMzNzA5ZS0wNyAxIDMuODU0MjZlLTA3WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==';
|
|
const menuButtonIcon_light = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04IDFDOCAwLjQ0NzcxNSA4LjQ0NzcyIDguMjg1MmUtMDggOSAxLjMxMTM0ZS0wN0M5LjU1MjI4IDEuNzk0MTdlLTA3IDEwIDAuNDQ3NzE2IDEwIDFDMTAgMS41NTIyOCA5LjU1MjI4IDIgOSAyQzguNDQ3NzIgMiA4IDEuNTUyMjggOCAxWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTQgMUM0IDAuNDQ3NzE1IDQuNDQ3NzIgLTIuNjY4MzllLTA3IDUgLTIuMTg1NTdlLTA3QzUuNTUyMjkgLTEuNzAyNzVlLTA3IDYgMC40NDc3MTUgNiAxQzYgMS41NTIyOCA1LjU1MjI5IDIgNSAyQzQuNDQ3NzIgMiA0IDEuNTUyMjggNCAxWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTEgMy44NTQyNmUtMDdDMC40NDc3MTYgMy4zNzE0NGUtMDcgLTEuOTU3MDNlLTA4IDAuNDQ3NzE2IC00LjM3MTE0ZS0wOCAxQy02Ljc4NTI2ZS0wOCAxLjU1MjI4IDAuNDQ3NzE2IDIgMSAyQzEuNTUyMjkgMiAyIDEuNTUyMjkgMiAxQzIgMC40NDc3MTYgMS41NTIyOSA0LjMzNzA5ZS0wNyAxIDMuODU0MjZlLTA3WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==';
|
|
|
|
const arrowLeftIcon_dark = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNSIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNSA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNSA5LjUzNjc0ZS0wN0w1IDlMMC41IDQuNUw1IDkuNTM2NzRlLTA3WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==';
|
|
const arrowLeftIcon_light = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNSIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNSA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNSA5LjUzNjc0ZS0wN0w1IDlMMC41IDQuNUw1IDkuNTM2NzRlLTA3WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==';
|
|
const arrowRightIcon_dark = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNSIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNSA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMCA5TDAgMEw0LjUgNC41TDAgOVoiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=';
|
|
const arrowRightIcon_light = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNSIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNSA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMCA5TDAgMEw0LjUgNC41TDAgOVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=';
|
|
|
|
const zoomInIcon_dark = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxMSAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMSA2TDExIDVMNiA1TDYgLTIuMTg1NTdlLTA3TDUgLTIuNjIyNjhlLTA3TDUgNUwtMi4xODU1N2UtMDcgNUwtMi42MjI2OGUtMDcgNkw1IDZMNSAxMUw2IDExTDYgNkwxMSA2WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==';
|
|
const zoomInIcon_light = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxMSAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMSA2TDExIDVMNiA1TDYgLTIuMTg1NTdlLTA3TDUgLTIuNjIyNjhlLTA3TDUgNUwtMi4xODU1N2UtMDcgNUwtMi42MjI2OGUtMDcgNkw1IDZMNSAxMUw2IDExTDYgNkwxMSA2WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==';
|
|
const zoomOutIcon_dark = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMSIgdmlld0JveD0iMCAwIDEwIDEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjEwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxMCIgdHJhbnNmb3JtPSJyb3RhdGUoOTAgMTAgMCkiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=';
|
|
const zoomOutIcon_light = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMSIgdmlld0JveD0iMCAwIDEwIDEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjEwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxMCIgdHJhbnNmb3JtPSJyb3RhdGUoOTAgMTAgMCkiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=';
|
|
|
|
const getIconsForLoad = function () {
|
|
return [
|
|
clickEffectIcon, afterEffectIcon,
|
|
entrEffectIcon, emphEffectIcon, exitEffectIcon,
|
|
pathEffectIcon_dark, pathEffectIcon_light,
|
|
playIcon_dark, playIcon_light,
|
|
stopIcon_dark, stopIcon_light,
|
|
arrowUpIcon_dark, arrowUpIcon_light,
|
|
arrowDownIcon_dark, arrowDownIcon_light,
|
|
closeIcon_dark, closeIcon_light,
|
|
menuButtonIcon_dark, menuButtonIcon_light,
|
|
arrowLeftIcon_dark, arrowLeftIcon_light,
|
|
arrowRightIcon_dark, arrowRightIcon_light,
|
|
zoomInIcon_dark, zoomInIcon_light,
|
|
zoomOutIcon_dark, zoomOutIcon_light,
|
|
];
|
|
}
|
|
|
|
|
|
// EXPORTS
|
|
window['AscCommon'] = window['AscCommon'] || {};
|
|
window['AscCommon'].CAnimPaneHeader = CAnimPaneHeader;
|
|
window['AscCommon'].CSeqListContainer = CSeqListContainer;
|
|
window['AscCommon'].CTimelineContainer = CTimelineContainer;
|
|
|
|
window['AscCommon'].getIconsForLoad = getIconsForLoad;
|
|
})(window);
|
|
|