2016-04-01 13:17:09 +00:00
|
|
|
|
/*
|
|
|
|
|
*
|
|
|
|
|
* (c) Copyright Ascensio System Limited 2010-2016
|
|
|
|
|
*
|
|
|
|
|
* 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 Lubanas st. 125a-25, Riga, Latvia,
|
|
|
|
|
* EU, LV-1021.
|
|
|
|
|
*
|
|
|
|
|
* 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
|
|
|
|
|
*
|
|
|
|
|
*/
|
2016-03-11 00:48:53 +00:00
|
|
|
|
/**
|
|
|
|
|
* TextArtSettings.js
|
|
|
|
|
*
|
|
|
|
|
* Created by Julia Radzhabova on 7/10/15
|
|
|
|
|
* Copyright (c) 2014 Ascensio System SIA. All rights reserved.
|
|
|
|
|
*
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
define([
|
|
|
|
|
'text!documenteditor/main/app/template/TextArtSettings.template',
|
|
|
|
|
'jquery',
|
|
|
|
|
'underscore',
|
|
|
|
|
'backbone',
|
|
|
|
|
'common/main/lib/component/ComboBox',
|
|
|
|
|
'common/main/lib/component/ComboBorderSize',
|
|
|
|
|
'common/main/lib/component/MetricSpinner',
|
|
|
|
|
'common/main/lib/component/ThemeColorPalette',
|
|
|
|
|
'common/main/lib/component/ColorButton',
|
|
|
|
|
'common/main/lib/component/ComboDataView',
|
|
|
|
|
'common/main/lib/component/Slider',
|
|
|
|
|
'common/main/lib/component/MultiSliderGradient'
|
|
|
|
|
], function (menuTemplate, $, _, Backbone) {
|
|
|
|
|
'use strict';
|
|
|
|
|
|
|
|
|
|
DE.Views.TextArtSettings = Backbone.View.extend(_.extend({
|
|
|
|
|
el: '#id-textart-settings',
|
|
|
|
|
|
|
|
|
|
// Compile our stats template
|
|
|
|
|
template: _.template(menuTemplate),
|
|
|
|
|
|
|
|
|
|
// Delegated events for creating new items, and clearing completed ones.
|
|
|
|
|
events: {
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
options: {
|
|
|
|
|
alias: 'TextArtSettings'
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
initialize: function () {
|
|
|
|
|
var me = this;
|
|
|
|
|
this._initSettings = true;
|
|
|
|
|
this._noApply = true;
|
|
|
|
|
this.imgprops = null;
|
|
|
|
|
this.shapeprops = null;
|
|
|
|
|
this._sendUndoPoint = true;
|
|
|
|
|
this._sliderChanged = false;
|
|
|
|
|
|
2016-04-06 13:38:54 +00:00
|
|
|
|
this.txtPt = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt);
|
|
|
|
|
|
2016-03-11 00:48:53 +00:00
|
|
|
|
this._state = {
|
|
|
|
|
Transparency: null,
|
2016-04-05 11:52:34 +00:00
|
|
|
|
FillType: Asc.c_oAscFill.FILL_TYPE_SOLID,
|
2016-03-11 00:48:53 +00:00
|
|
|
|
ShapeColor: 'transparent',
|
2016-04-05 11:52:34 +00:00
|
|
|
|
StrokeType: Asc.c_oAscStrokeType.STROKE_COLOR,
|
2016-03-11 00:48:53 +00:00
|
|
|
|
StrokeWidth: this._pt2mm(1),
|
|
|
|
|
StrokeColor: '000000',
|
|
|
|
|
GradColor: '000000',
|
2016-04-05 11:52:34 +00:00
|
|
|
|
GradFillType: Asc.c_oAscFillGradType.GRAD_LINEAR,
|
2016-03-11 00:48:53 +00:00
|
|
|
|
FormId: null,
|
|
|
|
|
DisabledControls: false
|
|
|
|
|
};
|
|
|
|
|
this.lockedControls = [];
|
|
|
|
|
this._locked = false;
|
|
|
|
|
|
2016-04-05 11:52:34 +00:00
|
|
|
|
this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_SOLID;
|
2016-03-11 00:48:53 +00:00
|
|
|
|
this.ShapeColor = {Value: 1, Color: 'transparent'}; // value=1 - цвет определен - прозрачный или другой, value=0 - цвет не определен, рисуем прозрачным
|
2016-04-05 11:52:34 +00:00
|
|
|
|
this.GradFillType = Asc.c_oAscFillGradType.GRAD_LINEAR;
|
2016-03-11 00:48:53 +00:00
|
|
|
|
this.GradColor = { values: [0, 100], colors: ['000000', 'ffffff'], currentIdx: 0};
|
|
|
|
|
this.GradRadialDirectionIdx = 0;
|
|
|
|
|
this.GradLinearDirectionType = 0;
|
|
|
|
|
|
|
|
|
|
this.BorderColor = {Value: 1, Color: 'transparent'}; // value=1 - цвет определен - прозрачный или другой, value=0 - цвет не определен, рисуем прозрачным
|
|
|
|
|
this.BorderSize = 0;
|
|
|
|
|
|
|
|
|
|
this.render();
|
|
|
|
|
|
|
|
|
|
this.cmbTextArt = new Common.UI.ComboDataView({
|
|
|
|
|
itemWidth: 50,
|
|
|
|
|
itemHeight: 50,
|
|
|
|
|
menuMaxHeight: 300,
|
|
|
|
|
enableKeyEvents: true,
|
|
|
|
|
showLast: false,
|
|
|
|
|
cls: 'combo-textart'
|
|
|
|
|
});
|
|
|
|
|
this.cmbTextArt.render($('#textart-combo-template'));
|
|
|
|
|
this.cmbTextArt.openButton.menu.cmpEl.css({
|
|
|
|
|
'min-width': 178,
|
|
|
|
|
'max-width': 178
|
|
|
|
|
});
|
|
|
|
|
this.cmbTextArt.on('click', _.bind(this.onTextArtSelect, this));
|
|
|
|
|
this.cmbTextArt.openButton.menu.on('show:after', function () {
|
|
|
|
|
me.cmbTextArt.menuPicker.scroller.update({alwaysVisibleY: true});
|
|
|
|
|
});
|
|
|
|
|
this.lockedControls.push(this.cmbTextArt);
|
|
|
|
|
|
|
|
|
|
this._arrFillSrc = [
|
2016-04-05 11:52:34 +00:00
|
|
|
|
{displayValue: this.textColor, value: Asc.c_oAscFill.FILL_TYPE_SOLID},
|
|
|
|
|
{displayValue: this.textGradientFill, value: Asc.c_oAscFill.FILL_TYPE_GRAD},
|
|
|
|
|
{displayValue: this.textNoFill, value: Asc.c_oAscFill.FILL_TYPE_NOFILL}
|
2016-03-11 00:48:53 +00:00
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
this.cmbFillSrc = new Common.UI.ComboBox({
|
|
|
|
|
el: $('#textart-combo-fill-src'),
|
|
|
|
|
cls: 'input-group-nr',
|
|
|
|
|
style: 'width: 100%;',
|
|
|
|
|
menuStyle: 'min-width: 190px;',
|
|
|
|
|
editable: false,
|
|
|
|
|
data: this._arrFillSrc
|
|
|
|
|
});
|
|
|
|
|
this.cmbFillSrc.setValue(this._arrFillSrc[0].value);
|
|
|
|
|
this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this));
|
|
|
|
|
this.lockedControls.push(this.cmbFillSrc);
|
|
|
|
|
|
|
|
|
|
this.btnBackColor = new Common.UI.ColorButton({
|
|
|
|
|
style: "width:45px;",
|
|
|
|
|
menu : new Common.UI.Menu({
|
|
|
|
|
items: [
|
|
|
|
|
{ template: _.template('<div id="textart-back-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
|
|
|
|
{ template: _.template('<a id="textart-back-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
|
|
|
|
]
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
this.btnBackColor.on('render:after', function(btn) {
|
|
|
|
|
me.colorsBack = new Common.UI.ThemeColorPalette({
|
|
|
|
|
el: $('#textart-back-color-menu'),
|
|
|
|
|
dynamiccolors: 10,
|
|
|
|
|
value: 'transparent',
|
|
|
|
|
colors: [
|
|
|
|
|
me.textThemeColors, '-', {color: '3366FF', effectId: 1}, {color: '0000FF', effectId: 2}, {color: '000090', effectId: 3}, {color: '660066', effectId: 4}, {color: '800000', effectId: 5},
|
|
|
|
|
{color: 'FF0000', effectId: 1}, {color: 'FF6600', effectId: 1}, {color: 'FFFF00', effectId: 2}, {color: 'CCFFCC', effectId: 3}, {color: '008000', effectId: 4},
|
|
|
|
|
'-',
|
|
|
|
|
{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2}, {color: '000000', effectId: 3}, {color: 'FFFFFF', effectId: 4}, {color: '000000', effectId: 5},
|
|
|
|
|
{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1},
|
|
|
|
|
{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1},
|
|
|
|
|
{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1},
|
|
|
|
|
{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1},
|
|
|
|
|
{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1},
|
|
|
|
|
{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1},
|
|
|
|
|
{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1},
|
|
|
|
|
{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1},
|
|
|
|
|
{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1},
|
|
|
|
|
'-', '--', '-', me.textStandartColors, '-', 'transparent',
|
|
|
|
|
'5301B3', '980ABD', 'B2275F', 'F83D26', 'F86A1D', 'F7AC16', 'F7CA12', 'FAFF44', 'D6EF39',
|
|
|
|
|
'-', '--'
|
|
|
|
|
]
|
|
|
|
|
});
|
|
|
|
|
me.colorsBack.on('select', _.bind(me.onColorsBackSelect, me));
|
|
|
|
|
});
|
|
|
|
|
this.btnBackColor.render( $('#textart-back-color-btn'));
|
|
|
|
|
this.btnBackColor.setColor('transparent');
|
|
|
|
|
$(this.el).on('click', '#textart-back-color-new', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor));
|
|
|
|
|
this.lockedControls.push(this.btnBackColor);
|
|
|
|
|
|
|
|
|
|
this.numTransparency = new Common.UI.MetricSpinner({
|
|
|
|
|
el: $('#textart-spin-transparency'),
|
|
|
|
|
step: 1,
|
|
|
|
|
width: 62,
|
|
|
|
|
value: '100 %',
|
|
|
|
|
defaultUnit : "%",
|
|
|
|
|
maxValue: 100,
|
|
|
|
|
minValue: 0
|
|
|
|
|
});
|
|
|
|
|
this.numTransparency.on('change', _.bind(this.onNumTransparencyChange, this));
|
|
|
|
|
this.lockedControls.push(this.numTransparency);
|
|
|
|
|
|
|
|
|
|
this.sldrTransparency = new Common.UI.SingleSlider({
|
|
|
|
|
el: $('#textart-slider-transparency'),
|
|
|
|
|
width: 75,
|
|
|
|
|
minValue: 0,
|
|
|
|
|
maxValue: 100,
|
|
|
|
|
value: 100
|
|
|
|
|
});
|
|
|
|
|
this.sldrTransparency.on('change', _.bind(this.onTransparencyChange, this));
|
|
|
|
|
this.sldrTransparency.on('changecomplete', _.bind(this.onTransparencyChangeComplete, this));
|
|
|
|
|
this.lockedControls.push(this.sldrTransparency);
|
|
|
|
|
|
|
|
|
|
this.lblTransparencyStart = $(this.el).find('#textart-lbl-transparency-start');
|
|
|
|
|
this.lblTransparencyEnd = $(this.el).find('#textart-lbl-transparency-end');
|
|
|
|
|
|
|
|
|
|
this._arrGradType = [
|
2016-04-05 11:52:34 +00:00
|
|
|
|
{displayValue: this.textLinear, value: Asc.c_oAscFillGradType.GRAD_LINEAR},
|
|
|
|
|
{displayValue: this.textRadial, value: Asc.c_oAscFillGradType.GRAD_PATH}
|
2016-03-11 00:48:53 +00:00
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
this.cmbGradType = new Common.UI.ComboBox({
|
|
|
|
|
el: $('#textart-combo-grad-type'),
|
|
|
|
|
cls: 'input-group-nr',
|
|
|
|
|
menuStyle: 'min-width: 90px;',
|
|
|
|
|
editable: false,
|
|
|
|
|
data: this._arrGradType
|
|
|
|
|
});
|
|
|
|
|
this.cmbGradType.setValue(this._arrGradType[0].value);
|
|
|
|
|
this.cmbGradType.on('selected', _.bind(this.onGradTypeSelect, this));
|
|
|
|
|
this.lockedControls.push(this.cmbGradType);
|
|
|
|
|
|
|
|
|
|
this._viewDataLinear = [
|
|
|
|
|
{ offsetx: 0, offsety: 0, type:45, subtype:-1, iconcls:'gradient-left-top' },
|
|
|
|
|
{ offsetx: 50, offsety: 0, type:90, subtype:4, iconcls:'gradient-top'},
|
|
|
|
|
{ offsetx: 100, offsety: 0, type:135, subtype:5, iconcls:'gradient-right-top'},
|
|
|
|
|
{ offsetx: 0, offsety: 50, type:0, subtype:6, iconcls:'gradient-left', cls: 'item-gradient-separator', selected: true},
|
|
|
|
|
{ offsetx: 100, offsety: 50, type:180, subtype:1, iconcls:'gradient-right'},
|
|
|
|
|
{ offsetx: 0, offsety: 100, type:315, subtype:2, iconcls:'gradient-left-bottom'},
|
|
|
|
|
{ offsetx: 50, offsety: 100, type:270, subtype:3, iconcls:'gradient-bottom'},
|
|
|
|
|
{ offsetx: 100, offsety: 100, type:225, subtype:7, iconcls:'gradient-right-bottom'}
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
this._viewDataRadial = [
|
|
|
|
|
{ offsetx: 100, offsety: 150, type:2, subtype:5, iconcls:'gradient-radial-center'}
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
this.btnDirection = new Common.UI.Button({
|
|
|
|
|
cls : 'btn-large-dataview',
|
|
|
|
|
iconCls : 'item-gradient gradient-left',
|
|
|
|
|
menu : new Common.UI.Menu({
|
|
|
|
|
style: 'min-width: 60px;',
|
|
|
|
|
menuAlign: 'tr-br',
|
|
|
|
|
items: [
|
|
|
|
|
{ template: _.template('<div id="id-textart-menu-direction" style="width: 175px; margin: 0 5px;"></div>') }
|
|
|
|
|
]
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
this.btnDirection.on('render:after', function(btn) {
|
|
|
|
|
me.mnuDirectionPicker = new Common.UI.DataView({
|
|
|
|
|
el: $('#id-textart-menu-direction'),
|
|
|
|
|
parentMenu: btn.menu,
|
|
|
|
|
restoreHeight: 174,
|
|
|
|
|
store: new Common.UI.DataViewStore(me._viewDataLinear),
|
|
|
|
|
itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
this.btnDirection.render($('#textart-button-direction'));
|
|
|
|
|
this.mnuDirectionPicker.on('item:click', _.bind(this.onSelectGradient, this, this.btnDirection));
|
|
|
|
|
this.lockedControls.push(this.btnDirection);
|
|
|
|
|
|
|
|
|
|
this.btnGradColor = new Common.UI.ColorButton({
|
|
|
|
|
style: "width:45px;",
|
|
|
|
|
menu : new Common.UI.Menu({
|
|
|
|
|
items: [
|
|
|
|
|
{ template: _.template('<div id="textart-gradient-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
|
|
|
|
{ template: _.template('<a id="textart-gradient-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
|
|
|
|
]
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
this.btnGradColor.on('render:after', function(btn) {
|
|
|
|
|
me.colorsGrad = new Common.UI.ThemeColorPalette({
|
|
|
|
|
el: $('#textart-gradient-color-menu'),
|
|
|
|
|
dynamiccolors: 10,
|
|
|
|
|
value: '000000',
|
|
|
|
|
colors: [
|
|
|
|
|
me.textThemeColors, '-', {color: '3366FF', effectId: 1}, {color: '0000FF', effectId: 2}, {color: '000090', effectId: 3}, {color: '660066', effectId: 4}, {color: '800000', effectId: 5},
|
|
|
|
|
{color: 'FF0000', effectId: 1}, {color: 'FF6600', effectId: 1}, {color: 'FFFF00', effectId: 2}, {color: 'CCFFCC', effectId: 3}, {color: '008000', effectId: 4},
|
|
|
|
|
'-',
|
|
|
|
|
{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2}, {color: '000000', effectId: 3}, {color: 'FFFFFF', effectId: 4}, {color: '000000', effectId: 5},
|
|
|
|
|
{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1},
|
|
|
|
|
{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1},
|
|
|
|
|
{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1},
|
|
|
|
|
{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1},
|
|
|
|
|
{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1},
|
|
|
|
|
{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1},
|
|
|
|
|
{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1},
|
|
|
|
|
{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1},
|
|
|
|
|
{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1},
|
|
|
|
|
'-', '--', '-', me.textStandartColors, '-',
|
|
|
|
|
'3D55FE', '5301B3', '980ABD', 'B2275F', 'F83D26', 'F86A1D', 'F7AC16', 'F7CA12', 'FAFF44', 'D6EF39',
|
|
|
|
|
'-', '--'
|
|
|
|
|
]
|
|
|
|
|
});
|
|
|
|
|
me.colorsGrad.on('select', _.bind(me.onColorsGradientSelect, me));
|
|
|
|
|
});
|
|
|
|
|
this.btnGradColor.render( $('#textart-gradient-color-btn'));
|
|
|
|
|
this.btnGradColor.setColor('000000');
|
|
|
|
|
$(this.el).on('click', '#textart-gradient-color-new', _.bind(this.addNewColor, this, this.colorsGrad, this.btnGradColor));
|
|
|
|
|
this.lockedControls.push(this.btnGradColor);
|
|
|
|
|
|
|
|
|
|
this.sldrGradient = new Common.UI.MultiSliderGradient({
|
|
|
|
|
el: $('#textart-slider-gradient'),
|
|
|
|
|
width: 125,
|
|
|
|
|
minValue: 0,
|
|
|
|
|
maxValue: 100,
|
|
|
|
|
values: [0, 100]
|
|
|
|
|
});
|
|
|
|
|
this.sldrGradient.on('change', _.bind(this.onGradientChange, this));
|
|
|
|
|
this.sldrGradient.on('changecomplete', _.bind(this.onGradientChangeComplete, this));
|
|
|
|
|
this.sldrGradient.on('thumbclick', function(cmp, index){
|
|
|
|
|
me.GradColor.currentIdx = index;
|
|
|
|
|
var color = me.GradColor.colors[me.GradColor.currentIdx];
|
|
|
|
|
me.btnGradColor.setColor(color);
|
|
|
|
|
me.colorsGrad.select(color,false);
|
|
|
|
|
});
|
|
|
|
|
this.sldrGradient.on('thumbdblclick', function(cmp){
|
|
|
|
|
me.btnGradColor.cmpEl.find('button').dropdown('toggle');
|
|
|
|
|
});
|
|
|
|
|
this.lockedControls.push(this.sldrGradient);
|
|
|
|
|
|
|
|
|
|
this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({
|
|
|
|
|
el: $('#textart-combo-border-size'),
|
|
|
|
|
style: "width: 93px;",
|
|
|
|
|
txtNoBorders: this.txtNoBorders
|
|
|
|
|
})
|
|
|
|
|
.on('selected', _.bind(this.onBorderSizeSelect, this))
|
|
|
|
|
.on('changed:before',_.bind(this.onBorderSizeChanged, this, true))
|
|
|
|
|
.on('changed:after', _.bind(this.onBorderSizeChanged, this, false))
|
|
|
|
|
.on('combo:blur', _.bind(this.onComboBlur, this, false));
|
|
|
|
|
this.BorderSize = this.cmbBorderSize.store.at(2).get('value');
|
|
|
|
|
this.cmbBorderSize.setValue(this.BorderSize);
|
|
|
|
|
this.lockedControls.push(this.cmbBorderSize);
|
|
|
|
|
|
|
|
|
|
this.btnBorderColor = new Common.UI.ColorButton({
|
|
|
|
|
style: "width:45px;",
|
|
|
|
|
menu : new Common.UI.Menu({
|
|
|
|
|
items: [
|
|
|
|
|
{ template: _.template('<div id="textart-border-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
|
|
|
|
{ template: _.template('<a id="textart-border-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
|
|
|
|
]
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
this.lockedControls.push(this.btnBorderColor);
|
|
|
|
|
|
|
|
|
|
this.btnBorderColor.on('render:after', function(btn) {
|
|
|
|
|
me.colorsBorder = new Common.UI.ThemeColorPalette({
|
|
|
|
|
el: $('#textart-border-color-menu'),
|
|
|
|
|
dynamiccolors: 10,
|
|
|
|
|
value: '000000',
|
|
|
|
|
colors: [
|
|
|
|
|
me.textThemeColors, '-', {color: '3366FF', effectId: 1}, {color: '0000FF', effectId: 2}, {color: '000090', effectId: 3}, {color: '660066', effectId: 4}, {color: '800000', effectId: 5},
|
|
|
|
|
{color: 'FF0000', effectId: 1}, {color: 'FF6600', effectId: 1}, {color: 'FFFF00', effectId: 2}, {color: 'CCFFCC', effectId: 3}, {color: '008000', effectId: 4},
|
|
|
|
|
'-',
|
|
|
|
|
{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2}, {color: '000000', effectId: 3}, {color: 'FFFFFF', effectId: 4}, {color: '000000', effectId: 5},
|
|
|
|
|
{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1},
|
|
|
|
|
{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1},
|
|
|
|
|
{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1},
|
|
|
|
|
{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1},
|
|
|
|
|
{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1},
|
|
|
|
|
{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1},
|
|
|
|
|
{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1},
|
|
|
|
|
{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1},
|
|
|
|
|
{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1},
|
|
|
|
|
'-', '--', '-', me.textStandartColors, '-',
|
|
|
|
|
'3D55FE', '5301B3', '980ABD', 'B2275F', 'F83D26', 'F86A1D', 'F7AC16', 'F7CA12', 'FAFF44', 'D6EF39',
|
|
|
|
|
'-', '--'
|
|
|
|
|
]
|
|
|
|
|
});
|
|
|
|
|
me.colorsBorder.on('select', _.bind(me.onColorsBorderSelect, me));
|
|
|
|
|
});
|
|
|
|
|
this.btnBorderColor.render( $('#textart-border-color-btn'));
|
|
|
|
|
this.btnBorderColor.setColor('000000');
|
|
|
|
|
$(this.el).on('click', '#textart-border-color-new', _.bind(this.addNewColor, this, this.colorsBorder, this.btnBorderColor));
|
|
|
|
|
|
|
|
|
|
this.cmbTransform = new Common.UI.ComboDataView({
|
|
|
|
|
itemWidth: 50,
|
|
|
|
|
itemHeight: 50,
|
|
|
|
|
menuMaxHeight: 300,
|
|
|
|
|
enableKeyEvents: true,
|
|
|
|
|
cls: 'combo-textart'
|
|
|
|
|
});
|
|
|
|
|
this.cmbTransform.render($('#textart-combo-transform'));
|
|
|
|
|
this.cmbTransform.openButton.menu.cmpEl.css({
|
|
|
|
|
'min-width': 178,
|
|
|
|
|
'max-width': 178
|
|
|
|
|
});
|
|
|
|
|
this.cmbTransform.on('click', _.bind(this.onTransformSelect, this));
|
|
|
|
|
this.cmbTransform.openButton.menu.on('show:after', function () {
|
|
|
|
|
me.cmbTransform.menuPicker.scroller.update({alwaysVisibleY: true});
|
|
|
|
|
});
|
|
|
|
|
this.lockedControls.push(this.cmbTransform);
|
|
|
|
|
|
|
|
|
|
this.FillColorContainer = $('#textart-panel-color-fill');
|
|
|
|
|
this.FillGradientContainer = $('#textart-panel-gradient-fill');
|
|
|
|
|
this.TransparencyContainer = $('#textart-panel-transparent-fill');
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
render: function () {
|
|
|
|
|
var el = $(this.el);
|
|
|
|
|
el.html(this.template({
|
|
|
|
|
scope: this
|
|
|
|
|
}));
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
setApi: function(api) {
|
|
|
|
|
this.api = api;
|
|
|
|
|
return this;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
onFillSrcSelect: function(combo, record) {
|
|
|
|
|
this.ShowHideElem(record.value);
|
|
|
|
|
switch (record.value){
|
2016-04-05 11:52:34 +00:00
|
|
|
|
case Asc.c_oAscFill.FILL_TYPE_SOLID:
|
|
|
|
|
this._state.FillType = Asc.c_oAscFill.FILL_TYPE_SOLID;
|
2016-03-11 00:48:53 +00:00
|
|
|
|
if (!this._noApply) {
|
2016-04-18 12:21:15 +00:00
|
|
|
|
var props = new Asc.asc_TextArtProperties();
|
|
|
|
|
var fill = new Asc.asc_CShapeFill();
|
2016-04-05 11:52:34 +00:00
|
|
|
|
fill.put_type(Asc.c_oAscFill.FILL_TYPE_SOLID);
|
2016-04-18 12:21:15 +00:00
|
|
|
|
fill.put_fill( new Asc.asc_CFillSolid());
|
2016-03-11 00:48:53 +00:00
|
|
|
|
fill.get_fill().put_color(Common.Utils.ThemeColor.getRgbColor((this.ShapeColor.Color=='transparent') ? {color: '4f81bd', effectId: 24} : this.ShapeColor.Color));
|
|
|
|
|
props.asc_putFill(fill);
|
|
|
|
|
this.shapeprops.put_TextArtProperties(props);
|
|
|
|
|
this.api.ImgApply(this.imgprops);
|
|
|
|
|
}
|
|
|
|
|
break;
|
2016-04-05 11:52:34 +00:00
|
|
|
|
case Asc.c_oAscFill.FILL_TYPE_GRAD:
|
|
|
|
|
this._state.FillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
|
2016-03-11 00:48:53 +00:00
|
|
|
|
if (!this._noApply) {
|
2016-04-18 12:21:15 +00:00
|
|
|
|
var props = new Asc.asc_TextArtProperties();
|
|
|
|
|
var fill = new Asc.asc_CShapeFill();
|
2016-04-05 11:52:34 +00:00
|
|
|
|
fill.put_type(Asc.c_oAscFill.FILL_TYPE_GRAD);
|
2016-04-18 12:21:15 +00:00
|
|
|
|
fill.put_fill( new Asc.asc_CFillGrad());
|
2016-03-11 00:48:53 +00:00
|
|
|
|
fill.get_fill().put_grad_type(this.GradFillType);
|
2016-04-05 11:52:34 +00:00
|
|
|
|
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
|
2016-03-11 00:48:53 +00:00
|
|
|
|
fill.get_fill().put_linear_angle(this.GradLinearDirectionType * 60000);
|
|
|
|
|
fill.get_fill().put_linear_scale(true);
|
|
|
|
|
}
|
2016-04-05 11:52:34 +00:00
|
|
|
|
if (this.OriginalFillType !== Asc.c_oAscFill.FILL_TYPE_GRAD) {
|
2016-03-11 00:48:53 +00:00
|
|
|
|
var HexColor0 = Common.Utils.ThemeColor.getRgbColor(this.GradColor.colors[0]).get_color().get_hex(),
|
|
|
|
|
HexColor1 = Common.Utils.ThemeColor.getRgbColor(this.GradColor.colors[1]).get_color().get_hex();
|
|
|
|
|
|
|
|
|
|
if (HexColor0 === 'ffffff' && HexColor1 === 'ffffff') {
|
|
|
|
|
HexColor0 = {color: '4f81bd', effectId: 24}; // color accent1
|
|
|
|
|
} else {
|
|
|
|
|
HexColor0 = this.GradColor.colors[0];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
fill.get_fill().put_positions([this.GradColor.values[0]*1000, this.GradColor.values[1]*1000]);
|
|
|
|
|
fill.get_fill().put_colors([Common.Utils.ThemeColor.getRgbColor(HexColor0), Common.Utils.ThemeColor.getRgbColor(this.GradColor.colors[1])]);
|
|
|
|
|
}
|
|
|
|
|
props.asc_putFill(fill);
|
|
|
|
|
this.shapeprops.put_TextArtProperties(props);
|
|
|
|
|
this.api.ImgApply(this.imgprops);
|
|
|
|
|
}
|
|
|
|
|
break;
|
2016-04-05 11:52:34 +00:00
|
|
|
|
case Asc.c_oAscFill.FILL_TYPE_NOFILL:
|
|
|
|
|
this._state.FillType = Asc.c_oAscFill.FILL_TYPE_NOFILL;
|
2016-03-11 00:48:53 +00:00
|
|
|
|
if (!this._noApply) {
|
2016-04-18 12:21:15 +00:00
|
|
|
|
var props = new Asc.asc_TextArtProperties();
|
|
|
|
|
var fill = new Asc.asc_CShapeFill();
|
2016-04-05 11:52:34 +00:00
|
|
|
|
fill.put_type(Asc.c_oAscFill.FILL_TYPE_NOFILL);
|
2016-03-11 00:48:53 +00:00
|
|
|
|
fill.put_fill(null);
|
|
|
|
|
props.asc_putFill(fill);
|
|
|
|
|
this.shapeprops.put_TextArtProperties(props);
|
|
|
|
|
this.api.ImgApply(this.imgprops);
|
|
|
|
|
}
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
this.fireEvent('editcomplete', this);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
onColorsBackSelect: function(picker, color) {
|
|
|
|
|
this.btnBackColor.setColor(color);
|
|
|
|
|
this.ShapeColor = {Value: 1, Color: color};
|
|
|
|
|
|
|
|
|
|
if (this.api && !this._noApply) {
|
2016-04-18 12:21:15 +00:00
|
|
|
|
var props = new Asc.asc_TextArtProperties();
|
|
|
|
|
var fill = new Asc.asc_CShapeFill();
|
2016-03-11 00:48:53 +00:00
|
|
|
|
|
|
|
|
|
if (this.ShapeColor.Color=='transparent') {
|
2016-04-05 11:52:34 +00:00
|
|
|
|
fill.put_type(Asc.c_oAscFill.FILL_TYPE_NOFILL);
|
2016-03-11 00:48:53 +00:00
|
|
|
|
fill.put_fill(null);
|
|
|
|
|
} else {
|
2016-04-05 11:52:34 +00:00
|
|
|
|
fill.put_type(Asc.c_oAscFill.FILL_TYPE_SOLID);
|
2016-04-18 12:21:15 +00:00
|
|
|
|
fill.put_fill( new Asc.asc_CFillSolid());
|
2016-03-11 00:48:53 +00:00
|
|
|
|
fill.get_fill().put_color(Common.Utils.ThemeColor.getRgbColor(this.ShapeColor.Color));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
props.asc_putFill(fill);
|
|
|
|
|
this.shapeprops.put_TextArtProperties(props);
|
|
|
|
|
this.api.ImgApply(this.imgprops);
|
|
|
|
|
}
|
|
|
|
|
this.fireEvent('editcomplete', this);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
addNewColor: function(picker, btn) {
|
|
|
|
|
picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
onNumTransparencyChange: function(field, newValue, oldValue, eOpts){
|
|
|
|
|
this.sldrTransparency.setValue(field.getNumberValue(), true);
|
|
|
|
|
if (this.api) {
|
|
|
|
|
var num = field.getNumberValue();
|
2016-04-18 12:21:15 +00:00
|
|
|
|
var props = new Asc.asc_TextArtProperties();
|
|
|
|
|
var fill = new Asc.asc_CShapeFill();
|
2016-03-11 00:48:53 +00:00
|
|
|
|
fill.put_transparent(num * 2.55);
|
|
|
|
|
props.asc_putFill(fill);
|
|
|
|
|
this.shapeprops.put_TextArtProperties(props);
|
|
|
|
|
this.api.ImgApply(this.imgprops);
|
|
|
|
|
}
|
|
|
|
|
this.fireEvent('editcomplete', this);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
onTransparencyChange: function(field, newValue, oldValue){
|
|
|
|
|
this._sliderChanged = newValue;
|
|
|
|
|
this.numTransparency.setValue(newValue, true);
|
|
|
|
|
|
|
|
|
|
if (this._sendUndoPoint) {
|
|
|
|
|
this.api.setStartPointHistory();
|
|
|
|
|
this._sendUndoPoint = false;
|
|
|
|
|
this.updateslider = setInterval(_.bind(this._transparencyApplyFunc, this), 100);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
onTransparencyChangeComplete: function(field, newValue, oldValue){
|
|
|
|
|
clearInterval(this.updateslider);
|
|
|
|
|
this._sliderChanged = newValue;
|
|
|
|
|
this.api.setEndPointHistory();
|
|
|
|
|
this._transparencyApplyFunc();
|
|
|
|
|
this._sendUndoPoint = true;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_transparencyApplyFunc: function() {
|
|
|
|
|
if (this._sliderChanged!==undefined) {
|
2016-04-18 12:21:15 +00:00
|
|
|
|
var props = new Asc.asc_TextArtProperties();
|
|
|
|
|
var fill = new Asc.asc_CShapeFill();
|
2016-03-11 00:48:53 +00:00
|
|
|
|
fill.put_transparent(this._sliderChanged * 2.55);
|
|
|
|
|
props.asc_putFill(fill);
|
|
|
|
|
this.shapeprops.put_TextArtProperties(props);
|
|
|
|
|
this.api.ImgApply(this.imgprops);
|
|
|
|
|
this._sliderChanged = undefined;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
onGradTypeSelect: function(combo, record){
|
|
|
|
|
this.GradFillType = record.value;
|
|
|
|
|
|
2016-04-05 11:52:34 +00:00
|
|
|
|
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
|
2016-03-11 00:48:53 +00:00
|
|
|
|
this.mnuDirectionPicker.store.reset(this._viewDataLinear);
|
|
|
|
|
this.mnuDirectionPicker.cmpEl.width(175);
|
|
|
|
|
this.mnuDirectionPicker.restoreHeight = 174;
|
|
|
|
|
var record = this.mnuDirectionPicker.store.findWhere({type: this.GradLinearDirectionType});
|
|
|
|
|
this.mnuDirectionPicker.selectRecord(record, true);
|
|
|
|
|
if (record)
|
|
|
|
|
this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
|
|
|
|
|
else
|
|
|
|
|
this.btnDirection.setIconCls('');
|
2016-04-05 11:52:34 +00:00
|
|
|
|
} else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) {
|
2016-03-11 00:48:53 +00:00
|
|
|
|
this.mnuDirectionPicker.store.reset(this._viewDataRadial);
|
|
|
|
|
this.mnuDirectionPicker.cmpEl.width(60);
|
|
|
|
|
this.mnuDirectionPicker.restoreHeight = 58;
|
|
|
|
|
this.mnuDirectionPicker.selectByIndex(this.GradRadialDirectionIdx, true);
|
|
|
|
|
if (this.GradRadialDirectionIdx>=0)
|
|
|
|
|
this.btnDirection.setIconCls('item-gradient ' + this._viewDataRadial[this.GradRadialDirectionIdx].iconcls);
|
|
|
|
|
else
|
|
|
|
|
this.btnDirection.setIconCls('');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (this.api && !this._noApply) {
|
2016-04-18 12:21:15 +00:00
|
|
|
|
var props = new Asc.asc_TextArtProperties();
|
|
|
|
|
var fill = new Asc.asc_CShapeFill();
|
2016-04-05 11:52:34 +00:00
|
|
|
|
fill.put_type(Asc.c_oAscFill.FILL_TYPE_GRAD);
|
2016-04-18 12:21:15 +00:00
|
|
|
|
fill.put_fill( new Asc.asc_CFillGrad());
|
2016-03-11 00:48:53 +00:00
|
|
|
|
fill.get_fill().put_grad_type(this.GradFillType);
|
2016-04-05 11:52:34 +00:00
|
|
|
|
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
|
2016-03-11 00:48:53 +00:00
|
|
|
|
fill.get_fill().put_linear_angle(this.GradLinearDirectionType * 60000);
|
|
|
|
|
fill.get_fill().put_linear_scale(true);
|
|
|
|
|
}
|
|
|
|
|
props.asc_putFill(fill);
|
|
|
|
|
this.shapeprops.put_TextArtProperties(props);
|
|
|
|
|
this.api.ImgApply(this.imgprops);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.fireEvent('editcomplete', this);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
onSelectGradient: function(btn, picker, itemView, record) {
|
|
|
|
|
if (this._noApply) return;
|
|
|
|
|
|
|
|
|
|
var rawData = {},
|
|
|
|
|
isPickerSelect = _.isFunction(record.toJSON);
|
|
|
|
|
|
|
|
|
|
if (isPickerSelect){
|
|
|
|
|
if (record.get('selected')) {
|
|
|
|
|
rawData = record.toJSON();
|
|
|
|
|
} else {
|
|
|
|
|
// record deselected
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
rawData = record;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.btnDirection.setIconCls('item-gradient ' + rawData.iconcls);
|
2016-04-05 11:52:34 +00:00
|
|
|
|
(this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0;
|
2016-03-11 00:48:53 +00:00
|
|
|
|
if (this.api) {
|
2016-04-05 11:52:34 +00:00
|
|
|
|
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
|
2016-04-18 12:21:15 +00:00
|
|
|
|
var props = new Asc.asc_TextArtProperties();
|
|
|
|
|
var fill = new Asc.asc_CShapeFill();
|
2016-04-05 11:52:34 +00:00
|
|
|
|
fill.put_type(Asc.c_oAscFill.FILL_TYPE_GRAD);
|
2016-04-18 12:21:15 +00:00
|
|
|
|
fill.put_fill( new Asc.asc_CFillGrad());
|
2016-03-11 00:48:53 +00:00
|
|
|
|
fill.get_fill().put_grad_type(this.GradFillType);
|
|
|
|
|
fill.get_fill().put_linear_angle(rawData.type * 60000);
|
|
|
|
|
fill.get_fill().put_linear_scale(true);
|
|
|
|
|
|
|
|
|
|
props.asc_putFill(fill);
|
|
|
|
|
this.shapeprops.put_TextArtProperties(props);
|
|
|
|
|
this.api.ImgApply(this.imgprops);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.fireEvent('editcomplete', this);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
onColorsGradientSelect: function(picker, color) {
|
|
|
|
|
this.btnGradColor.setColor(color);
|
|
|
|
|
this.GradColor.colors[this.GradColor.currentIdx] = color;
|
|
|
|
|
this.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(color) == 'object') ? color.color : color));
|
|
|
|
|
|
|
|
|
|
if (this.api && !this._noApply) {
|
2016-04-18 12:21:15 +00:00
|
|
|
|
var props = new Asc.asc_TextArtProperties();
|
|
|
|
|
var fill = new Asc.asc_CShapeFill();
|
2016-04-05 11:52:34 +00:00
|
|
|
|
fill.put_type(Asc.c_oAscFill.FILL_TYPE_GRAD);
|
2016-04-18 12:21:15 +00:00
|
|
|
|
fill.put_fill( new Asc.asc_CFillGrad());
|
2016-03-11 00:48:53 +00:00
|
|
|
|
fill.get_fill().put_grad_type(this.GradFillType);
|
|
|
|
|
fill.get_fill().put_colors([Common.Utils.ThemeColor.getRgbColor(this.GradColor.colors[0]), Common.Utils.ThemeColor.getRgbColor(this.GradColor.colors[1])]);
|
|
|
|
|
|
2016-04-05 11:52:34 +00:00
|
|
|
|
if (this.OriginalFillType !== Asc.c_oAscFill.FILL_TYPE_GRAD) {
|
|
|
|
|
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
|
2016-03-11 00:48:53 +00:00
|
|
|
|
fill.get_fill().put_linear_angle(this.GradLinearDirectionType * 60000);
|
|
|
|
|
fill.get_fill().put_linear_scale(true);
|
|
|
|
|
}
|
|
|
|
|
fill.get_fill().put_positions([this.GradColor.values[0]*1000, this.GradColor.values[1]*1000]);
|
|
|
|
|
}
|
|
|
|
|
props.asc_putFill(fill);
|
|
|
|
|
this.shapeprops.put_TextArtProperties(props);
|
|
|
|
|
this.api.ImgApply(this.imgprops);
|
|
|
|
|
}
|
|
|
|
|
this.fireEvent('editcomplete', this);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
onGradientChange: function(slider, newValue, oldValue){
|
|
|
|
|
this.GradColor.values = slider.getValues();
|
|
|
|
|
this._sliderChanged = true;
|
|
|
|
|
if (this.api && !this._noApply) {
|
|
|
|
|
if (this._sendUndoPoint) {
|
|
|
|
|
this.api.setStartPointHistory();
|
|
|
|
|
this._sendUndoPoint = false;
|
|
|
|
|
this.updateslider = setInterval(_.bind(this._gradientApplyFunc, this), 100);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
onGradientChangeComplete: function(slider, newValue, oldValue){
|
|
|
|
|
clearInterval(this.updateslider);
|
|
|
|
|
this._sliderChanged = true;
|
|
|
|
|
this.api.setEndPointHistory();
|
|
|
|
|
this._gradientApplyFunc();
|
|
|
|
|
this._sendUndoPoint = true;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_gradientApplyFunc: function() {
|
|
|
|
|
if (this._sliderChanged) {
|
2016-04-18 12:21:15 +00:00
|
|
|
|
var props = new Asc.asc_TextArtProperties();
|
|
|
|
|
var fill = new Asc.asc_CShapeFill();
|
2016-04-05 11:52:34 +00:00
|
|
|
|
fill.put_type(Asc.c_oAscFill.FILL_TYPE_GRAD);
|
2016-04-18 12:21:15 +00:00
|
|
|
|
fill.put_fill( new Asc.asc_CFillGrad());
|
2016-03-11 00:48:53 +00:00
|
|
|
|
fill.get_fill().put_grad_type(this.GradFillType);
|
|
|
|
|
fill.get_fill().put_positions([this.GradColor.values[0]*1000, this.GradColor.values[1]*1000]);
|
|
|
|
|
|
2016-04-05 11:52:34 +00:00
|
|
|
|
if (this.OriginalFillType !== Asc.c_oAscFill.FILL_TYPE_GRAD) {
|
|
|
|
|
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) {
|
2016-03-11 00:48:53 +00:00
|
|
|
|
fill.get_fill().put_linear_angle(this.GradLinearDirectionType * 60000);
|
|
|
|
|
fill.get_fill().put_linear_scale(true);
|
|
|
|
|
}
|
|
|
|
|
fill.get_fill().put_colors([Common.Utils.ThemeColor.getRgbColor(this.GradColor.colors[0]), Common.Utils.ThemeColor.getRgbColor(this.GradColor.colors[1])]);
|
|
|
|
|
}
|
|
|
|
|
props.asc_putFill(fill);
|
|
|
|
|
this.shapeprops.put_TextArtProperties(props);
|
|
|
|
|
this.api.ImgApply(this.imgprops);
|
|
|
|
|
this._sliderChanged = false;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
applyBorderSize: function(value) {
|
|
|
|
|
value = parseFloat(value);
|
|
|
|
|
value = isNaN(value) ? 0 : Math.max(0, Math.min(1584, value));
|
|
|
|
|
|
|
|
|
|
this.BorderSize = value;
|
|
|
|
|
if (this.api && !this._noApply) {
|
2016-04-18 12:21:15 +00:00
|
|
|
|
var props = new Asc.asc_TextArtProperties();
|
|
|
|
|
var stroke = new Asc.asc_CStroke();
|
2016-03-11 00:48:53 +00:00
|
|
|
|
if (this.BorderSize<0.01) {
|
2016-04-05 11:52:34 +00:00
|
|
|
|
stroke.put_type( Asc.c_oAscStrokeType.STROKE_NONE);
|
2016-03-11 00:48:53 +00:00
|
|
|
|
this._state.StrokeType = this._state.StrokeWidth = -1;
|
|
|
|
|
} else {
|
2016-04-05 11:52:34 +00:00
|
|
|
|
stroke.put_type( Asc.c_oAscStrokeType.STROKE_COLOR);
|
2016-03-11 00:48:53 +00:00
|
|
|
|
if (this.BorderColor.Color == 'transparent' || this.BorderColor.Color.color == 'transparent')
|
|
|
|
|
stroke.put_color(Common.Utils.ThemeColor.getRgbColor({color: '000000', effectId: 29}));
|
2016-04-05 11:52:34 +00:00
|
|
|
|
else if (this._state.StrokeType == Asc.c_oAscStrokeType.STROKE_NONE || this._state.StrokeType === null)
|
2016-03-11 00:48:53 +00:00
|
|
|
|
stroke.put_color(Common.Utils.ThemeColor.getRgbColor(Common.Utils.ThemeColor.colorValue2EffectId(this.BorderColor.Color)));
|
|
|
|
|
stroke.put_width(this._pt2mm(this.BorderSize));
|
|
|
|
|
}
|
|
|
|
|
props.asc_putLine(stroke);
|
|
|
|
|
this.shapeprops.put_TextArtProperties(props);
|
|
|
|
|
this.api.ImgApply(this.imgprops);
|
|
|
|
|
}
|
|
|
|
|
this.fireEvent('editcomplete', this);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
onComboBlur: function() {
|
|
|
|
|
this.fireEvent('editcomplete', this);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
onBorderSizeChanged: function(before, combo, record, e) {
|
|
|
|
|
var me = this;
|
|
|
|
|
if (before) {
|
2016-04-06 13:38:54 +00:00
|
|
|
|
var value = parseFloat(record.value),
|
|
|
|
|
expr = new RegExp('^\\s*(\\d*(\\.|,)?\\d+)\\s*(' + me.txtPt + ')?\\s*$');
|
|
|
|
|
if (!(expr.exec(record.value)) || value<0 || value>1584) {
|
2016-03-11 00:48:53 +00:00
|
|
|
|
this._state.StrokeType = this._state.StrokeWidth = -1;
|
|
|
|
|
Common.UI.error({
|
|
|
|
|
msg: this.textBorderSizeErr,
|
|
|
|
|
callback: function() {
|
|
|
|
|
_.defer(function(btn) {
|
|
|
|
|
me.fireEvent('editcomplete', me);
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
} else
|
|
|
|
|
this.applyBorderSize(record.value);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
onBorderSizeSelect: function(combo, record) {
|
|
|
|
|
this.applyBorderSize(record.value);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
onColorsBorderSelect: function(picker, color) {
|
|
|
|
|
this.btnBorderColor.setColor(color);
|
|
|
|
|
this.BorderColor = {Value: 1, Color: color};
|
|
|
|
|
if (this.api && this.BorderSize>0 && !this._noApply) {
|
2016-04-18 12:21:15 +00:00
|
|
|
|
var props = new Asc.asc_TextArtProperties();
|
|
|
|
|
var stroke = new Asc.asc_CStroke();
|
2016-03-11 00:48:53 +00:00
|
|
|
|
if (this.BorderSize<0.01) {
|
2016-04-05 11:52:34 +00:00
|
|
|
|
stroke.put_type( Asc.c_oAscStrokeType.STROKE_NONE);
|
2016-03-11 00:48:53 +00:00
|
|
|
|
} else {
|
2016-04-05 11:52:34 +00:00
|
|
|
|
stroke.put_type( Asc.c_oAscStrokeType.STROKE_COLOR);
|
2016-03-11 00:48:53 +00:00
|
|
|
|
stroke.put_color(Common.Utils.ThemeColor.getRgbColor(this.BorderColor.Color));
|
|
|
|
|
stroke.put_width(this._pt2mm(this.BorderSize));
|
|
|
|
|
}
|
|
|
|
|
props.asc_putLine(stroke);
|
|
|
|
|
this.shapeprops.put_TextArtProperties(props);
|
|
|
|
|
this.api.ImgApply(this.imgprops);
|
|
|
|
|
}
|
|
|
|
|
this.fireEvent('editcomplete', this);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
ChangeSettings: function(props) {
|
|
|
|
|
if (this.imgprops==null) {
|
2016-04-18 12:21:15 +00:00
|
|
|
|
this.imgprops = new Asc.asc_CImgProperty();
|
|
|
|
|
this.imgprops.put_ShapeProperties(new Asc.asc_CShapeProperty());
|
2016-03-11 00:48:53 +00:00
|
|
|
|
this.shapeprops = this.imgprops.get_ShapeProperties();
|
|
|
|
|
} else
|
|
|
|
|
this.imgprops.put_ImageUrl(null);
|
|
|
|
|
|
|
|
|
|
if (this._initSettings)
|
|
|
|
|
this.createDelayedElements();
|
|
|
|
|
this._initSettings = false;
|
|
|
|
|
|
|
|
|
|
if (props && props.get_ShapeProperties() && props.get_ShapeProperties().get_TextArtProperties())
|
|
|
|
|
{
|
|
|
|
|
var shapeprops = props.get_ShapeProperties().get_TextArtProperties();
|
|
|
|
|
|
|
|
|
|
this._noApply = true;
|
|
|
|
|
|
|
|
|
|
this.disableControls(this._locked);
|
|
|
|
|
|
|
|
|
|
// background colors
|
|
|
|
|
var rec = null,
|
|
|
|
|
fill = shapeprops.asc_getFill(),
|
|
|
|
|
fill_type = (fill) ? fill.get_type() : null,
|
|
|
|
|
color = null;
|
|
|
|
|
|
|
|
|
|
if (fill) {
|
|
|
|
|
var transparency = fill.get_transparent();
|
|
|
|
|
if ( Math.abs(this._state.Transparency-transparency)>0.001 || Math.abs(this.numTransparency.getNumberValue()-transparency)>0.001 ||
|
|
|
|
|
(this._state.Transparency===null || transparency===null)&&(this._state.Transparency!==transparency || this.numTransparency.getNumberValue()!==transparency)) {
|
|
|
|
|
|
|
|
|
|
if (transparency !== undefined) {
|
|
|
|
|
this.sldrTransparency.setValue((transparency===null) ? 100 : transparency/255*100, true);
|
|
|
|
|
this.numTransparency.setValue(this.sldrTransparency.getValue(), true);
|
|
|
|
|
}
|
|
|
|
|
this._state.Transparency=transparency;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (fill===null || fill===undefined || fill_type===null) { // заливка не совпадает у неск. фигур
|
|
|
|
|
this.OriginalFillType = null;
|
2016-04-05 11:52:34 +00:00
|
|
|
|
} else if (fill_type==Asc.c_oAscFill.FILL_TYPE_NOFILL) { // заливки нет
|
|
|
|
|
this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_NOFILL;
|
|
|
|
|
} else if (fill_type==Asc.c_oAscFill.FILL_TYPE_SOLID) {
|
2016-03-11 00:48:53 +00:00
|
|
|
|
fill = fill.get_fill();
|
|
|
|
|
color = fill.get_color();
|
|
|
|
|
if (color) {
|
2016-04-05 11:52:34 +00:00
|
|
|
|
if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
|
2016-03-11 00:48:53 +00:00
|
|
|
|
this.ShapeColor = {Value: 1, Color: {color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value() }};
|
|
|
|
|
} else {
|
|
|
|
|
this.ShapeColor = {Value: 1, Color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b())};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
} else
|
|
|
|
|
this.ShapeColor = {Value: 0, Color: 'transparent'};
|
2016-04-05 11:52:34 +00:00
|
|
|
|
this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_SOLID;
|
2016-03-11 00:48:53 +00:00
|
|
|
|
this.GradColor.colors[0] = (this.ShapeColor.Color!=='transparent') ? Common.Utils.ThemeColor.colorValue2EffectId(this.ShapeColor.Color) : '000000';
|
|
|
|
|
this.GradColor.colors[1] = 'ffffff';
|
2016-04-05 11:52:34 +00:00
|
|
|
|
} else if (fill_type==Asc.c_oAscFill.FILL_TYPE_GRAD) {
|
2016-03-11 00:48:53 +00:00
|
|
|
|
fill = fill.get_fill();
|
|
|
|
|
var gradfilltype = fill.get_grad_type(); // null - не совпадают у нескольких фигур
|
|
|
|
|
if (this._state.GradFillType !== gradfilltype || this.GradFillType !== gradfilltype) {
|
|
|
|
|
this.GradFillType = gradfilltype;
|
|
|
|
|
rec = undefined;
|
2016-04-05 11:52:34 +00:00
|
|
|
|
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR || this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) {
|
2016-03-11 00:48:53 +00:00
|
|
|
|
this.cmbGradType.setValue(this.GradFillType);
|
|
|
|
|
rec = this.cmbGradType.store.findWhere({value: this.GradFillType});
|
|
|
|
|
this.onGradTypeSelect(this.cmbGradType, rec.attributes);
|
|
|
|
|
} else {
|
|
|
|
|
this.cmbGradType.setValue('');
|
|
|
|
|
this.btnDirection.setIconCls('');
|
|
|
|
|
}
|
|
|
|
|
this._state.GradFillType = this.GradFillType;
|
|
|
|
|
}
|
|
|
|
|
|
2016-04-05 11:52:34 +00:00
|
|
|
|
if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR ) {
|
2016-03-11 00:48:53 +00:00
|
|
|
|
var value = Math.floor(fill.get_linear_angle()/60000);
|
|
|
|
|
if (Math.abs(this.GradLinearDirectionType-value)>0.001) {
|
|
|
|
|
this.GradLinearDirectionType=value;
|
|
|
|
|
var record = this.mnuDirectionPicker.store.findWhere({type: value});
|
|
|
|
|
this.mnuDirectionPicker.selectRecord(record, true);
|
|
|
|
|
if (record)
|
|
|
|
|
this.btnDirection.setIconCls('item-gradient ' + record.get('iconcls'));
|
|
|
|
|
else
|
|
|
|
|
this.btnDirection.setIconCls('');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var colors = fill.get_colors();
|
|
|
|
|
if (colors && colors.length>0) {
|
|
|
|
|
color = colors[0];
|
|
|
|
|
if (color) {
|
2016-04-05 11:52:34 +00:00
|
|
|
|
if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
|
2016-03-11 00:48:53 +00:00
|
|
|
|
this.GradColor.colors[0] = {color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value()};
|
|
|
|
|
Common.Utils.ThemeColor.colorValue2EffectId(this.GradColor.colors[0]);
|
|
|
|
|
} else {
|
|
|
|
|
this.GradColor.colors[0] = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
|
|
|
|
|
}
|
|
|
|
|
} else
|
|
|
|
|
this.GradColor.colors[0] = '000000';
|
|
|
|
|
|
|
|
|
|
color = colors[1];
|
|
|
|
|
if (color) {
|
2016-04-05 11:52:34 +00:00
|
|
|
|
if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
|
2016-03-11 00:48:53 +00:00
|
|
|
|
this.GradColor.colors[1] = {color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value()};
|
|
|
|
|
Common.Utils.ThemeColor.colorValue2EffectId(this.GradColor.colors[1]);
|
|
|
|
|
} else {
|
|
|
|
|
this.GradColor.colors[1] = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
|
|
|
|
|
}
|
|
|
|
|
} else
|
|
|
|
|
this.GradColor.colors[1] = 'ffffff';
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
var positions = fill.get_positions();
|
|
|
|
|
if (positions && positions.length>0) {
|
|
|
|
|
var position = positions[0];
|
|
|
|
|
if (position!==null) {
|
|
|
|
|
position = position/1000;
|
|
|
|
|
this.GradColor.values[0] = position;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
position = positions[1];
|
|
|
|
|
if (position!==null) {
|
|
|
|
|
position = position/1000;
|
|
|
|
|
this.GradColor.values[1] = position;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
this.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(this.GradColor.colors[0]) == 'object') ? this.GradColor.colors[0].color : this.GradColor.colors[0]), 0);
|
|
|
|
|
this.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(this.GradColor.colors[1]) == 'object') ? this.GradColor.colors[1].color : this.GradColor.colors[1]), 1);
|
|
|
|
|
this.sldrGradient.setValue(0, this.GradColor.values[0]);
|
|
|
|
|
this.sldrGradient.setValue(1, this.GradColor.values[1]);
|
2016-04-05 11:52:34 +00:00
|
|
|
|
this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
|
2016-03-11 00:48:53 +00:00
|
|
|
|
this.ShapeColor = {Value: 1, Color: this.GradColor.colors[0]};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if ( this._state.FillType!==this.OriginalFillType ) {
|
|
|
|
|
this.cmbFillSrc.setValue((this.OriginalFillType===null) ? '' : this.OriginalFillType);
|
|
|
|
|
this._state.FillType=this.OriginalFillType;
|
|
|
|
|
this.ShowHideElem(this.OriginalFillType);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var type1 = typeof(this.ShapeColor.Color),
|
|
|
|
|
type2 = typeof(this._state.ShapeColor);
|
|
|
|
|
|
|
|
|
|
if ( (type1 !== type2) || (type1=='object' &&
|
|
|
|
|
(this.ShapeColor.Color.effectValue!==this._state.ShapeColor.effectValue || this._state.ShapeColor.color.indexOf(this.ShapeColor.Color.color)<0)) ||
|
|
|
|
|
(type1!='object' && this._state.ShapeColor.indexOf(this.ShapeColor.Color)<0 )) {
|
|
|
|
|
|
|
|
|
|
this.btnBackColor.setColor(this.ShapeColor.Color);
|
|
|
|
|
if ( typeof(this.ShapeColor.Color) == 'object' ) {
|
|
|
|
|
var isselected = false;
|
|
|
|
|
for (var i=0; i<10; i++) {
|
|
|
|
|
if ( Common.Utils.ThemeColor.ThemeValues[i] == this.ShapeColor.Color.effectValue ) {
|
|
|
|
|
this.colorsBack.select(this.ShapeColor.Color,true);
|
|
|
|
|
isselected = true;
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (!isselected) this.colorsBack.clearSelection();
|
|
|
|
|
} else
|
|
|
|
|
this.colorsBack.select(this.ShapeColor.Color,true);
|
|
|
|
|
|
|
|
|
|
this._state.ShapeColor = this.ShapeColor.Color;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// border colors
|
|
|
|
|
var stroke = shapeprops.asc_getLine(),
|
|
|
|
|
strokeType = (stroke) ? stroke.get_type() : null;
|
|
|
|
|
|
|
|
|
|
if (stroke) {
|
2016-04-05 11:52:34 +00:00
|
|
|
|
if ( strokeType == Asc.c_oAscStrokeType.STROKE_COLOR ) {
|
2016-03-11 00:48:53 +00:00
|
|
|
|
color = stroke.get_color();
|
|
|
|
|
if (color) {
|
2016-04-05 11:52:34 +00:00
|
|
|
|
if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
|
2016-03-11 00:48:53 +00:00
|
|
|
|
this.BorderColor = {Value: 1, Color: {color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value() }};
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
this.BorderColor = {Value: 1, Color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b())};
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
this.BorderColor = {Value: 1, Color: 'transparent'};
|
|
|
|
|
} else {
|
|
|
|
|
this.BorderColor = {Value: 1, Color: 'transparent'};
|
|
|
|
|
}
|
|
|
|
|
} else { // no stroke
|
|
|
|
|
this.BorderColor = {Value: 0, Color: 'transparent'};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
type1 = typeof(this.BorderColor.Color);
|
|
|
|
|
type2 = typeof(this._state.StrokeColor);
|
|
|
|
|
|
|
|
|
|
if ( (type1 !== type2) || (type1=='object' &&
|
|
|
|
|
(this.BorderColor.Color.effectValue!==this._state.StrokeColor.effectValue || this._state.StrokeColor.color.indexOf(this.BorderColor.Color.color)<0)) ||
|
|
|
|
|
(type1!='object' && (this._state.StrokeColor.indexOf(this.BorderColor.Color)<0 || typeof(this.btnBorderColor.color)=='object'))) {
|
|
|
|
|
|
|
|
|
|
this.btnBorderColor.setColor(this.BorderColor.Color);
|
|
|
|
|
if ( typeof(this.BorderColor.Color) == 'object' ) {
|
|
|
|
|
var isselected = false;
|
|
|
|
|
for (var i=0; i<10; i++) {
|
|
|
|
|
if ( Common.Utils.ThemeColor.ThemeValues[i] == this.BorderColor.Color.effectValue ) {
|
|
|
|
|
this.colorsBorder.select(this.BorderColor.Color,true);
|
|
|
|
|
isselected = true;
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (!isselected) this.colorsBorder.clearSelection();
|
|
|
|
|
} else
|
|
|
|
|
this.colorsBorder.select(this.BorderColor.Color,true);
|
|
|
|
|
|
|
|
|
|
this._state.StrokeColor = this.BorderColor.Color;
|
|
|
|
|
}
|
|
|
|
|
|
2016-04-05 11:52:34 +00:00
|
|
|
|
if (this._state.StrokeType !== strokeType || strokeType == Asc.c_oAscStrokeType.STROKE_COLOR) {
|
|
|
|
|
if ( strokeType == Asc.c_oAscStrokeType.STROKE_COLOR ) {
|
2016-03-11 00:48:53 +00:00
|
|
|
|
var w = stroke.get_width();
|
2016-04-06 13:38:54 +00:00
|
|
|
|
var check_value = (Math.abs(this._state.StrokeWidth-w)<0.001) && !((new RegExp(this.txtPt + '\\s*$')).test(this.cmbBorderSize.getRawValue()));
|
2016-03-11 00:48:53 +00:00
|
|
|
|
if ( Math.abs(this._state.StrokeWidth-w)>0.001 || check_value ||
|
|
|
|
|
(this._state.StrokeWidth===null || w===null)&&(this._state.StrokeWidth!==w)) {
|
|
|
|
|
this._state.StrokeWidth = w;
|
|
|
|
|
|
|
|
|
|
if (w!==null) w = this._mm2pt(w);
|
|
|
|
|
var _selectedItem = (w===null) ? w : _.find(this.cmbBorderSize.store.models, function(item) {
|
|
|
|
|
if ( w<item.attributes.value+0.01 && w>item.attributes.value-0.01) {
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
if (_selectedItem)
|
|
|
|
|
this.cmbBorderSize.selectRecord(_selectedItem);
|
|
|
|
|
else {
|
2016-04-06 13:38:54 +00:00
|
|
|
|
this.cmbBorderSize.setValue((w!==null) ? parseFloat(w.toFixed(2)) + ' ' + this.txtPt : '');
|
2016-03-11 00:48:53 +00:00
|
|
|
|
}
|
|
|
|
|
this.BorderSize = w;
|
|
|
|
|
}
|
2016-04-05 11:52:34 +00:00
|
|
|
|
} else if (strokeType == Asc.c_oAscStrokeType.STROKE_NONE) {
|
2016-03-11 00:48:53 +00:00
|
|
|
|
this._state.StrokeWidth = 0;
|
|
|
|
|
this.BorderSize = this.cmbBorderSize.store.at(0).get('value');
|
|
|
|
|
this.cmbBorderSize.setValue(this.BorderSize);
|
|
|
|
|
} else {
|
|
|
|
|
this._state.StrokeWidth = null;
|
|
|
|
|
this.BorderSize = -1;
|
|
|
|
|
this.cmbBorderSize.setValue(null);
|
|
|
|
|
}
|
|
|
|
|
this._state.StrokeType = strokeType;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
color = this.GradColor.colors[this.GradColor.currentIdx];
|
|
|
|
|
type1 = typeof(color);
|
|
|
|
|
type2 = typeof(this._state.GradColor);
|
|
|
|
|
|
|
|
|
|
if ( (type1 !== type2) || (type1=='object' &&
|
|
|
|
|
(color.effectValue!==this._state.GradColor.effectValue || this._state.GradColor.color.indexOf(color.color)<0)) ||
|
|
|
|
|
(type1!='object' && this._state.GradColor.indexOf(color)<0 )) {
|
|
|
|
|
|
|
|
|
|
this.btnGradColor.setColor(color);
|
|
|
|
|
if ( typeof(color) == 'object' ) {
|
|
|
|
|
var isselected = false;
|
|
|
|
|
for (var i=0; i<10; i++) {
|
|
|
|
|
if ( Common.Utils.ThemeColor.ThemeValues[i] == color.effectValue ) {
|
|
|
|
|
this.colorsGrad.select(color,true);
|
|
|
|
|
isselected = true;
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (!isselected) this.colorsGrad.clearSelection();
|
|
|
|
|
} else
|
|
|
|
|
this.colorsGrad.select(color,true);
|
|
|
|
|
|
|
|
|
|
this._state.GradColor = color;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var form = shapeprops.asc_getForm();
|
|
|
|
|
if (this._state.FormId!==form) {
|
|
|
|
|
this.cmbTransform.suspendEvents();
|
|
|
|
|
var rec = this.cmbTransform.menuPicker.store.findWhere({
|
|
|
|
|
type: form
|
|
|
|
|
});
|
|
|
|
|
this.cmbTransform.menuPicker.selectRecord(rec);
|
|
|
|
|
this.cmbTransform.resumeEvents();
|
|
|
|
|
this._state.FormId=form;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this._noApply = false;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
createDelayedElements: function() {
|
|
|
|
|
this.UpdateThemeColors();
|
|
|
|
|
this.fillTransform(this.api.get_PropertyEditorTextArts());
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
fillTextArt: function() {
|
|
|
|
|
var me = this,
|
|
|
|
|
models = this.application.getCollection('Common.Collections.TextArt').models,
|
|
|
|
|
count = this.cmbTextArt.menuPicker.store.length;
|
|
|
|
|
if (count>0 && count==models.length) {
|
|
|
|
|
var data = this.cmbTextArt.menuPicker.store.models;
|
|
|
|
|
_.each(models, function(template, index){
|
|
|
|
|
data[index].set('imageUrl', template.get('imageUrl'));
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
this.cmbTextArt.menuPicker.store.reset(models);
|
|
|
|
|
if (this.cmbTextArt.menuPicker.store.length > 0)
|
|
|
|
|
this.cmbTextArt.fillComboView(this.cmbTextArt.menuPicker.store.at(0));
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
onTextArtSelect: function(combo, record){
|
|
|
|
|
if (this.api && !this._noApply) {
|
2016-04-18 12:21:15 +00:00
|
|
|
|
var props = new Asc.asc_TextArtProperties();
|
2016-03-11 00:48:53 +00:00
|
|
|
|
props.asc_putStyle(record.get('data'));
|
|
|
|
|
this.shapeprops.put_TextArtProperties(props);
|
|
|
|
|
this.api.ImgApply(this.imgprops);
|
|
|
|
|
}
|
|
|
|
|
this.fireEvent('editcomplete', this);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
fillTransform: function(transforms) {
|
|
|
|
|
if (transforms && transforms.length>1 && transforms[1]){
|
|
|
|
|
var me = this,
|
|
|
|
|
artStore = [],
|
|
|
|
|
arrTransforms = transforms[1];
|
|
|
|
|
for (var i=0; i<arrTransforms.length; i++) {
|
|
|
|
|
var arr = arrTransforms[i];
|
|
|
|
|
if (arr && arr.length>0)
|
|
|
|
|
_.each(arr, function(item){
|
|
|
|
|
artStore.push({
|
|
|
|
|
imageUrl: item.Image,
|
|
|
|
|
type : item.Type,
|
|
|
|
|
selected: false
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
this.cmbTransform.menuPicker.store.add(artStore);
|
|
|
|
|
if (this.cmbTransform.menuPicker.store.length > 0) {
|
|
|
|
|
this.cmbTransform.fillComboView(this.cmbTransform.menuPicker.store.at(0),true);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
onTransformSelect: function(combo, record){
|
|
|
|
|
if (this.api && !this._noApply) {
|
2016-04-18 12:21:15 +00:00
|
|
|
|
var props = new Asc.asc_TextArtProperties();
|
2016-03-11 00:48:53 +00:00
|
|
|
|
props.asc_putForm(record.get('type'));
|
|
|
|
|
this.shapeprops.put_TextArtProperties(props);
|
|
|
|
|
this.api.ImgApply(this.imgprops);
|
|
|
|
|
}
|
|
|
|
|
this.fireEvent('editcomplete', this);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
UpdateThemeColors: function() {
|
|
|
|
|
this.colorsBorder.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
|
|
|
|
this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
|
|
|
|
this.colorsGrad.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_pt2mm: function(value) {
|
|
|
|
|
return (value * 25.4 / 72.0);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_mm2pt: function(value) {
|
|
|
|
|
return (value * 72.0 / 25.4);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
ShowHideElem: function(value) {
|
2016-04-05 11:52:34 +00:00
|
|
|
|
this.FillColorContainer.toggleClass('settings-hidden', value !== Asc.c_oAscFill.FILL_TYPE_SOLID);
|
|
|
|
|
this.FillGradientContainer.toggleClass('settings-hidden', value !== Asc.c_oAscFill.FILL_TYPE_GRAD);
|
|
|
|
|
this.TransparencyContainer.toggleClass('settings-hidden', (value === Asc.c_oAscFill.FILL_TYPE_NOFILL || value === null));
|
2016-03-11 00:48:53 +00:00
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
setLocked: function (locked) {
|
|
|
|
|
this._locked = locked;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
disableControls: function(disable) {
|
|
|
|
|
if (this._state.DisabledControls!==disable) {
|
|
|
|
|
this._state.DisabledControls = disable;
|
|
|
|
|
_.each(this.lockedControls, function(item) {
|
|
|
|
|
item.setDisabled(disable);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
txtNoBorders : 'No Line',
|
|
|
|
|
strStroke : 'Stroke',
|
|
|
|
|
strColor : 'Color',
|
|
|
|
|
strSize : 'Size',
|
|
|
|
|
strFill : 'Fill',
|
|
|
|
|
textColor : 'Color Fill',
|
|
|
|
|
textNewColor : 'Add New Custom Color',
|
|
|
|
|
textThemeColors : 'Theme Colors',
|
|
|
|
|
textStandartColors : 'Standart Colors',
|
|
|
|
|
strTransparency : 'Opacity',
|
|
|
|
|
textNoFill : 'No Fill',
|
|
|
|
|
textSelectTexture : 'Select',
|
|
|
|
|
textGradientFill: 'Gradient Fill',
|
|
|
|
|
textLinear: 'Linear',
|
|
|
|
|
textRadial: 'Radial',
|
|
|
|
|
textDirection: 'Direction',
|
|
|
|
|
textStyle: 'Style',
|
|
|
|
|
textGradient: 'Gradient',
|
|
|
|
|
textBorderSizeErr: 'The entered value is incorrect.<br>Please enter a value between 0 pt and 1584 pt.',
|
|
|
|
|
textTransform: 'Transform',
|
|
|
|
|
textTemplate: 'Template'
|
|
|
|
|
}, DE.Views.TextArtSettings || {}));
|
|
|
|
|
});
|