Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge pull request #1440 from ONLYOFFICE/feature/fix-animation

Browse source 
Fix animation
This commit is contained in:
Julia Radzhabova 2021-12-23 23:14:00 +03:00 committed by GitHub
parent 6c025e2381 9087ba72ae
commit a69310886d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 130 additions and 114 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
apps/common/main/lib/util/define.js
View file

@ -792,10 +792,10 @@ define(function(){ 'use strict';
getEffectGroupData: function () {
return [
{id: 'menu-effect-group-entrance', value: AscFormat.PRESET_CLASS_ENTR, caption: this.textEntrance},
{id: 'menu-effect-group-emphasis', value: AscFormat.PRESET_CLASS_EMPH, caption: this.textEmphasis},
{id: 'menu-effect-group-exit', value: AscFormat.PRESET_CLASS_EXIT, caption: this.textExit},
{id: 'menu-effect-group-path', value: AscFormat.PRESET_CLASS_PATH, caption: this.textPath}
{id: 'menu-effect-group-entrance', value: AscFormat.PRESET_CLASS_ENTR, caption: this.textEntrance, iconClsCustom: 'animation-entrance-custom'},
{id: 'menu-effect-group-emphasis', value: AscFormat.PRESET_CLASS_EMPH, caption: this.textEmphasis, iconClsCustom: 'animation-emphasis-custom'},
{id: 'menu-effect-group-exit', value: AscFormat.PRESET_CLASS_EXIT, caption: this.textExit, iconClsCustom: 'animation-exit-custom'},
{id: 'menu-effect-group-path', value: AscFormat.PRESET_CLASS_PATH, caption: this.textPath, iconClsCustom: 'animation-motion_paths-custom'}
];
},
@ -830,7 +830,7 @@ define(function(){ 'use strict';
{group: 'menu-effect-group-emphasis', value: AscFormat.EMPHASIS_COMPLEMENTARY_COLOR, iconCls: 'animation-emphasis-complementary_color', displayValue: this.textComplementaryColor},
{group: 'menu-effect-group-emphasis', value: AscFormat.EMPHASIS_LINE_COLOR, iconCls: 'animation-emphasis-line_color', displayValue: this.textLineColor},
{group: 'menu-effect-group-emphasis', value: AscFormat.EMPHASIS_FILL_COLOR, iconCls: 'animation-emphasis-fill_color', displayValue: this.textFillColor},
{group: 'menu-effect-group-exit', value: AscFormat.EXIT_DISAPPEAR, iconCls: 'animation-exit-Disappear', displayValue: this.textDisappear},
{group: 'menu-effect-group-exit', value: AscFormat.EXIT_DISAPPEAR, iconCls: 'animation-exit-disappear', displayValue: this.textDisappear},
{group: 'menu-effect-group-exit', value: AscFormat.EXIT_FADE, iconCls: 'animation-exit-fade', displayValue: this.textFade},
{group: 'menu-effect-group-exit', value: AscFormat.EXIT_FLY_OUT_TO, iconCls: 'animation-exit-fly_out', displayValue: this.textFlyOut},
{group: 'menu-effect-group-exit', value: AscFormat.EXIT_FLOAT, iconCls: 'animation-exit-float_out', displayValue: this.textFloatOut},
@ -870,8 +870,8 @@ define(function(){ 'use strict';
{group: 'menu-effect-group-path', value: AscFormat.MOTION_TRAPEZOID, iconCls: 'animation-motion_paths-shapes', displayValue: this.textTrapezoid},
{group: 'menu-effect-group-path', value: AscFormat.MOTION_HORIZONTAL_FIGURE_8_FOUR, iconCls: 'animation-motion_paths-loops', displayValue: this.textHorizontalFigure},
{group: 'menu-effect-group-path', value: AscFormat.MOTION_VERTICAL_FIGURE_8, iconCls: 'animation-motion_paths-loops', displayValue: this.textVerticalFigure},
{group: 'menu-effect-group-path', value: AscFormat.MOTION_LOOP_DE_LOOP, iconCls: 'animation-motion_paths-loops', displayValue: this.textLoopDeLoop},
{group: 'menu-effect-group-path', value: AscFormat.MOTION_CUSTOM_PATH, iconCls: 'animation-motion_paths-custom_path', displayValue: this.textCustomPath}
{group: 'menu-effect-group-path', value: AscFormat.MOTION_LOOP_DE_LOOP, iconCls: 'animation-motion_paths-loops', displayValue: this.textLoopDeLoop}//,
//{group: 'menu-effect-group-path', value: AscFormat.MOTION_CUSTOM_PATH, iconCls: 'animation-motion_paths-custom_path', displayValue: this.textCustomPath}
];
},

24
apps/presentationeditor/main/app/controller/Animation.js
View file

@ -159,10 +159,11 @@ define([
(new PE.Views.AnimationDialog({
api : this.api,
activeEffect : this._state.Effect,
handler: function(result, value) {
groupValue : this._state.EffectGroup,
handler : function(result, value) {
if (result == 'ok') {
if (me.api) {
me.addNewEffect(value.activeEffect, value.activeGroupValue, replace);
me.addNewEffect(value.activeEffect, value.activeGroupValue, value.activeGroup, replace);
}
}
}
@ -171,13 +172,13 @@ define([
onAddAnimation: function(picker, record) {
var type = record.get('value');
var group = _.findWhere(Common.define.effectData.getEffectGroupData(), {id: record.get('group')}).value;
this.addNewEffect(type, group, false);
var group = _.findWhere(this.EffectGroups, {id: record.get('group')}).value;
this.addNewEffect(type, group, record.get('group'), false);
},
addNewEffect: function (type, group, replace) {
addNewEffect: function (type, group, groupName, replace) {
if (this._state.Effect == type) return;
var parameter = this.view.setMenuParameters(type, undefined, group == this._state.EffectGroups);
var parameter = this.view.setMenuParameters(type, groupName, undefined);
this.api.asc_AddAnimation(group, type, (parameter != undefined)?parameter:0, replace);
this._state.EffectGroups = group;
this._state.Effect = type;
@ -237,14 +238,13 @@ define([
onEffectSelect: function (combo, record) {
if (this.api) {
var type = record.get('value');
var group = (type != AscFormat.ANIM_PRESET_NONE) ? _.findWhere(Common.define.effectData.getEffectGroupData(), {id: record.get('group')}).value : undefined;
this.addNewEffect(type, group, this._state.Effect != AscFormat.ANIM_PRESET_NONE);
var group = (type != AscFormat.ANIM_PRESET_NONE) ? _.findWhere(this.EffectGroups, {id: record.get('group')}).value : undefined;
this.addNewEffect(type, group, record.get('group'),this._state.Effect != AscFormat.ANIM_PRESET_NONE);
}
},
onStartSelect: function (combo, record) {
if (this.api) {
// this._state.StartEffect = record.value;
this.AnimationProperties.asc_putStartType(record.value);
this.api.asc_SetAnimationProperties(this.AnimationProperties);
}
@ -326,7 +326,7 @@ define([
item = store.add(new Common.UI.DataViewModel({
group: group.get('id'),
value: this._state.Effect,
iconCls: 'transition-push',
iconCls: group.get('iconClsCustom'),
displayValue: rec ? rec.displayValue : '',
isCustom: true
}), {at:index+1});
@ -342,8 +342,8 @@ define([
}
this._state.EffectOption = this.AnimationProperties.asc_getSubtype();
if (this._state.EffectOption !== undefined)
this._state.noAnimationParam = view.setMenuParameters(this._state.Effect, this._state.EffectOption)===undefined;
if (this._state.EffectOption !== undefined && this._state.EffectOption !== null)
this._state.noAnimationParam = view.setMenuParameters(this._state.Effect, _.findWhere(this.EffectGroups,{value: this._state.EffectGroup}).id, this._state.EffectOption)===undefined;
value = this.AnimationProperties.asc_getDuration();
if (Math.abs(this._state.Duration - value) > 0.001 ||

8
apps/presentationeditor/main/app/template/Toolbar.template
View file

@ -253,7 +253,7 @@
<span id="animation-spin-duration" class="btn-slot text spinner" ></span>
</div>
<div class="elset font-normal">
<div class="btn-slot" style="width: 82px;" id="animation-trigger"></div>
<div class="btn-slot text" id="animation-trigger"></div>
</div>
</div>
<div class="separator long"></div>
@ -267,12 +267,12 @@
</div>
</div>
<div class="separator long"></div>
<div class="group small" style="width: 120px; min-width: 100px;">
<div class="group small" >
<div class="elset">
<div class="btn-slot" id="animation-moveearlier"></div>
<div class="btn-slot text" id="animation-moveearlier"></div>
</div>
<div class="elset font-normal">
<div class="btn-slot" id="animation-movelater"></div>
<div class="btn-slot text" id="animation-movelater"></div>
</div>
</div>
</section>

33
apps/presentationeditor/main/app/view/Animation.js
View file

@ -62,7 +62,7 @@ define([
me.fireEvent('animation:selecteffect', [combo, record]);
}, me));
me.listEffectsMore.on('click', _.bind(function () {
me.fireEvent('animation:additional', [true]); // replace effect
me.fireEvent('animation:additional', [me.listEffects.menuPicker.getSelectedRec().get('value') != AscFormat.ANIM_PRESET_NONE]); // replace effect
}, me));
}
@ -159,6 +159,7 @@ define([
this.lockedControls = [];
this._arrEffectName = [{group:'none', value: AscFormat.ANIM_PRESET_NONE, iconCls: 'animation-none', displayValue: this.textNone}].concat(Common.define.effectData.getEffectData());
_.forEach(this._arrEffectName,function (elm){elm.tip = elm.displayValue;});
this._arrEffectOptions = [];
var itemWidth = 87,
itemHeight = 40;
@ -214,8 +215,10 @@ define([
iconCls: 'toolbar__icon transition-fade',
lock: [_set.slideDeleted, _set.noSlides, _set.noAnimationPreview],
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'medium'
/*dataHintDirection: 'left',
dataHintOffset: 'medium'*/
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.lockedControls.push(this.btnPreview);
@ -259,7 +262,7 @@ define([
this.numDuration = new Common.UI.MetricSpinner({
el: this.$el.find('#animation-spin-duration'),
step: 1,
width: 52,
width: 55,
value: '',
defaultUnit: this.txtSec,
maxValue: 300,
@ -304,7 +307,7 @@ define([
this.numDelay = new Common.UI.MetricSpinner({
el: this.$el.find('#animation-spin-delay'),
step: 1,
width: 52,
width: 55,
value: '',
defaultUnit: this.txtSec,
maxValue: 300,
@ -318,7 +321,8 @@ define([
this.cmbStart = new Common.UI.ComboBox({
cls: 'input-group-nr',
menuStyle: 'width: 150px;',
menuStyle: 'min-width: 100%;',
editable: false,
lock: [_set.slideDeleted, _set.noSlides, _set.noGraphic, _set.noAnimation],
data: [
{value: AscFormat.NODE_TYPE_CLICKEFFECT, displayValue: this.textStartOnClick},
@ -326,7 +330,8 @@ define([
{value: AscFormat.NODE_TYPE_AFTEREFFECT, displayValue: this.textStartAfterPrevious}
],
dataHint: '1',
dataHintDirection: 'top'
dataHintDirection: 'top',
dataHintOffset: 'small'
});
this.lockedControls.push(this.cmbStart);
@ -343,15 +348,15 @@ define([
this.numRepeat = new Common.UI.MetricSpinner({
el: this.$el.find('#animation-spin-repeat'),
step: 1,
width: 88,
width: 55,
value: '',
maxValue: 1000,
minValue: 0,
defaultUnit: '',
lock: [_set.slideDeleted, _set.noSlides, _set.noGraphic, _set.noAnimation],
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
dataHintDirection: 'top',
dataHintOffset: 'small'
});
this.lockedControls.push(this.numRepeat);
@ -477,10 +482,12 @@ define([
return this.lockedControls;
},
setMenuParameters: function (effectId, option)
setMenuParameters: function (effectId, effectGroup, option)
{
var effect = _.findWhere(this.allEffects, {value: effectId});
var arrEffectOptions = Common.define.effectData.getEffectOptionsData(effect.group, effect.value);
var arrEffectOptions;
var effect = _.findWhere(this.allEffects, {group: effectGroup, value: effectId});
if(effect)
arrEffectOptions = Common.define.effectData.getEffectOptionsData(effect.group, effect.value);
if(!arrEffectOptions) {
this.btnParameters.menu.removeAll();
this._effectId = effectId

18
apps/presentationeditor/main/app/view/AnimationDialog.js
View file

@ -70,12 +70,18 @@ define([
this._state.activeGroup = this.EffectGroupData[0].id;
this._state.activeGroupValue = this.EffectGroupData[0].value;
this.EffectGroupData.forEach(function (item) {item.displayValue = item.caption;});
if ((this.options.activeEffect != undefined) && (this.options.activeEffect != AscFormat.ANIM_PRESET_NONE)){
if ((this.options.activeEffect != undefined) && (this.options.activeEffect != AscFormat.ANIM_PRESET_NONE) && (this.options.activeEffect !== AscFormat.ANIM_PRESET_MULTIPLE)){
this._state.activeEffect = this.options.activeEffect;
var itemEffect = _.findWhere(this.allEffects,{value: this._state.activeEffect});
this._state.activeGroup = itemEffect.group;
this._state.activeGroupValue = _.findWhere(this.EffectGroupData, {id: this._state.activeGroup}).value;
this._state.activeGroupValue = this.options.groupValue;
var group = _.findWhere(this.EffectGroupData, {value: this._state.activeGroupValue})
this._state.activeGroup = group.id;
var itemEffect = _.findWhere(this.allEffects, {
group: this._state.activeGroup,
value: this._state.activeEffect
});
if(itemEffect)
this.activeLevel = itemEffect.level;
}
Common.UI.Window.prototype.initialize.call(this, this.options);
},
@ -154,7 +160,9 @@ define([
fillEffect: function () {
var arr = _.where(this.allEffects, {group: this._state.activeGroup, level: this.activeLevel });
this.lstEffectList.store.reset(arr);
var item = (this._state.activeEffect != undefined)?this.lstEffectList.store.findWhere({value: this._state.activeEffect}):this.lstEffectList.store.at(0);
var item = this.lstEffectList.store.findWhere({value: this._state.activeEffect});
if(!item)
item = this.lstEffectList.store.at(0);
this.lstEffectList.selectRecord(item);
this._state.activeEffect = item.get('value');
},

4
apps/presentationeditor/main/app/view/Transitions.js
View file

@ -221,7 +221,7 @@ define([
this.numDuration = new Common.UI.MetricSpinner({
el: this.$el.find('#transit-spin-duration'),
step: 1,
width: 50,
width: 55,
value: '',
defaultUnit: this.txtSec,
maxValue: 300,
@ -236,7 +236,7 @@ define([
this.numDelay = new Common.UI.MetricSpinner({
el: this.$el.find('#transit-spin-delay'),
step: 1,
width: 60,
width: 55,
value: '',
defaultUnit: this.txtSec,
maxValue: 300,

1
apps/presentationeditor/main/locale/en.json
View file

@ -2101,6 +2101,7 @@
"PE.Views.Toolbar.textAlignMiddle": "Align text to the middle",
"PE.Views.Toolbar.textAlignRight": "Align text right",
"PE.Views.Toolbar.textAlignTop": "Align text to the top",
"PE.Views.Toolbar.textTabAnimation": "Animation",
"PE.Views.Toolbar.textArrangeBack": "Send to Background",
"PE.Views.Toolbar.textArrangeBackward": "Send Backward",
"PE.Views.Toolbar.textArrangeForward": "Bring Forward",