2016-04-01 13:17:09 +00:00
/ *
*
2019-01-17 13:05:03 +00:00
* ( c ) Copyright Ascensio System SIA 2010 - 2019
2016-04-01 13:17:09 +00:00
*
* 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
*
2019-01-17 13:00:34 +00:00
* You can contact Ascensio System SIA at 20 A - 12 Ernesta Birznieka - Upisha
* street , Riga , Latvia , EU , LV - 1050.
2016-04-01 13:17:09 +00:00
*
* 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
/ * *
* ShapeSettingsAdvanced . js
*
* Created by Julia Radzhabova on 4 / 15 / 14
2018-03-01 12:16:38 +00:00
* Copyright ( c ) 2018 Ascensio System SIA . All rights reserved .
2016-03-11 00:48:53 +00:00
*
* /
define ( [ 'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.template' ,
'common/main/lib/view/AdvancedSettingsWindow' ,
'common/main/lib/component/ComboBox' ,
2018-08-30 15:41:09 +00:00
'common/main/lib/component/MetricSpinner' ,
'common/main/lib/component/CheckBox'
2016-03-11 00:48:53 +00:00
] , function ( contentTemplate ) {
'use strict' ;
PE . Views . ShapeSettingsAdvanced = Common . Views . AdvancedSettingsWindow . extend ( _ . extend ( {
options : {
contentWidth : 300 ,
2017-01-18 13:24:25 +00:00
height : 342 ,
2016-03-11 00:48:53 +00:00
toggleGroup : 'shape-adv-settings-group' ,
sizeOriginal : { width : 0 , height : 0 } ,
sizeMax : { width : 55.88 , height : 55.88 } ,
2016-04-21 11:47:28 +00:00
properties : null ,
storageName : 'pe-shape-settings-adv-category'
2016-03-11 00:48:53 +00:00
} ,
initialize : function ( options ) {
_ . extend ( this . options , {
title : this . textTitle ,
items : [
{ panelId : 'id-adv-shape-width' , panelCaption : this . textSize } ,
2018-08-30 15:41:09 +00:00
{ panelId : 'id-adv-shape-rotate' , panelCaption : this . textRotation } ,
2016-03-11 00:48:53 +00:00
{ panelId : 'id-adv-shape-shape' , panelCaption : this . textWeightArrows } ,
2020-02-25 14:05:09 +00:00
{ panelId : 'id-adv-shape-margins' , panelCaption : this . textTextBox } ,
2017-05-26 09:49:33 +00:00
{ panelId : 'id-adv-shape-columns' , panelCaption : this . strColumns } ,
2017-01-18 13:24:25 +00:00
{ panelId : 'id-adv-shape-alttext' , panelCaption : this . textAlt }
2016-03-11 00:48:53 +00:00
] ,
contentTemplate : _ . template ( contentTemplate ) ( {
scope : this
} )
} , options ) ;
Common . Views . AdvancedSettingsWindow . prototype . initialize . call ( this , this . options ) ;
this . spinners = [ ] ;
this . Margins = undefined ;
this . _nRatio = 1 ;
this . _originalProps = this . options . shapeProps ;
this . _changedProps = null ;
} ,
render : function ( ) {
Common . Views . AdvancedSettingsWindow . prototype . render . call ( this ) ;
var me = this ;
this . spnWidth = new Common . UI . MetricSpinner ( {
el : $ ( '#shape-advanced-spin-width' ) ,
step : . 1 ,
width : 100 ,
defaultUnit : "cm" ,
value : '3 cm' ,
maxValue : 55.88 ,
minValue : 0
} ) ;
this . spnWidth . on ( 'change' , _ . bind ( function ( field , newValue , oldValue , eOpts ) {
if ( this . btnRatio . pressed ) {
var w = field . getNumberValue ( ) ;
var h = w / this . _nRatio ;
if ( h > this . sizeMax . height ) {
h = this . sizeMax . height ;
w = h * this . _nRatio ;
this . spnWidth . setValue ( w , true ) ;
}
this . spnHeight . setValue ( h , true ) ;
}
if ( this . _changedProps ) {
this . _changedProps . put _Width ( Common . Utils . Metric . fnRecalcToMM ( field . getNumberValue ( ) ) ) ;
this . _changedProps . put _Height ( Common . Utils . Metric . fnRecalcToMM ( this . spnHeight . getNumberValue ( ) ) ) ;
}
} , this ) ) ;
this . spinners . push ( this . spnWidth ) ;
this . spnHeight = new Common . UI . MetricSpinner ( {
el : $ ( '#shape-advanced-spin-height' ) ,
step : . 1 ,
width : 100 ,
defaultUnit : "cm" ,
value : '3 cm' ,
maxValue : 55.88 ,
minValue : 0
} ) ;
this . spnHeight . on ( 'change' , _ . bind ( function ( field , newValue , oldValue , eOpts ) {
var h = field . getNumberValue ( ) , w = null ;
if ( this . btnRatio . pressed ) {
w = h * this . _nRatio ;
if ( w > this . sizeMax . width ) {
w = this . sizeMax . width ;
h = w / this . _nRatio ;
this . spnHeight . setValue ( h , true ) ;
}
this . spnWidth . setValue ( w , true ) ;
}
if ( this . _changedProps ) {
this . _changedProps . put _Height ( Common . Utils . Metric . fnRecalcToMM ( field . getNumberValue ( ) ) ) ;
this . _changedProps . put _Width ( Common . Utils . Metric . fnRecalcToMM ( this . spnWidth . getNumberValue ( ) ) ) ;
}
} , this ) ) ;
this . spinners . push ( this . spnHeight ) ;
this . btnRatio = new Common . UI . Button ( {
2020-04-29 07:36:53 +00:00
parentEl : $ ( '#shape-advanced-button-ratio' ) ,
2016-03-11 00:48:53 +00:00
cls : 'btn-toolbar' ,
2019-12-02 11:48:50 +00:00
iconCls : 'toolbar__icon advanced-btn-ratio' ,
2016-03-11 00:48:53 +00:00
style : 'margin-bottom: 1px;' ,
enableToggle : true ,
hint : this . textKeepRatio
} ) ;
this . btnRatio . on ( 'click' , _ . bind ( function ( btn , e ) {
if ( btn . pressed && this . spnHeight . getNumberValue ( ) > 0 ) {
this . _nRatio = this . spnWidth . getNumberValue ( ) / this . spnHeight . getNumberValue ( ) ;
}
2016-05-24 11:45:53 +00:00
if ( this . _changedProps ) {
this . _changedProps . asc _putLockAspect ( btn . pressed ) ;
}
2016-03-11 00:48:53 +00:00
} , this ) ) ;
// Margins
this . spnMarginTop = new Common . UI . MetricSpinner ( {
el : $ ( '#shape-margin-top' ) ,
step : . 1 ,
width : 100 ,
defaultUnit : "cm" ,
value : '0 cm' ,
maxValue : 55.87 ,
minValue : 0
} ) ;
this . spnMarginTop . on ( 'change' , _ . bind ( function ( field , newValue , oldValue , eOpts ) {
if ( this . _changedProps ) {
if ( this . _changedProps . get _paddings ( ) === null || this . _changedProps . get _paddings ( ) === undefined )
2016-04-18 12:21:15 +00:00
this . _changedProps . put _paddings ( new Asc . asc _CPaddings ( ) ) ;
2016-03-11 00:48:53 +00:00
this . _changedProps . get _paddings ( ) . put _Top ( Common . Utils . Metric . fnRecalcToMM ( field . getNumberValue ( ) ) ) ;
}
} , this ) ) ;
this . spinners . push ( this . spnMarginTop ) ;
this . spnMarginBottom = new Common . UI . MetricSpinner ( {
el : $ ( '#shape-margin-bottom' ) ,
step : . 1 ,
width : 100 ,
defaultUnit : "cm" ,
value : '0 cm' ,
maxValue : 55.87 ,
minValue : 0
} ) ;
this . spnMarginBottom . on ( 'change' , _ . bind ( function ( field , newValue , oldValue , eOpts ) {
if ( this . _changedProps ) {
if ( this . _changedProps . get _paddings ( ) === null || this . _changedProps . get _paddings ( ) === undefined )
2016-04-18 12:21:15 +00:00
this . _changedProps . put _paddings ( new Asc . asc _CPaddings ( ) ) ;
2016-03-11 00:48:53 +00:00
this . _changedProps . get _paddings ( ) . put _Bottom ( Common . Utils . Metric . fnRecalcToMM ( field . getNumberValue ( ) ) ) ;
}
} , this ) ) ;
this . spinners . push ( this . spnMarginBottom ) ;
this . spnMarginLeft = new Common . UI . MetricSpinner ( {
el : $ ( '#shape-margin-left' ) ,
step : . 1 ,
width : 100 ,
defaultUnit : "cm" ,
value : '0.19 cm' ,
2020-10-28 20:03:01 +00:00
maxValue : 55.87 ,
2016-03-11 00:48:53 +00:00
minValue : 0
} ) ;
this . spnMarginLeft . on ( 'change' , _ . bind ( function ( field , newValue , oldValue , eOpts ) {
if ( this . _changedProps ) {
if ( this . _changedProps . get _paddings ( ) === null || this . _changedProps . get _paddings ( ) === undefined )
2016-04-18 12:21:15 +00:00
this . _changedProps . put _paddings ( new Asc . asc _CPaddings ( ) ) ;
2016-03-11 00:48:53 +00:00
this . _changedProps . get _paddings ( ) . put _Left ( Common . Utils . Metric . fnRecalcToMM ( field . getNumberValue ( ) ) ) ;
}
} , this ) ) ;
this . spinners . push ( this . spnMarginLeft ) ;
this . spnMarginRight = new Common . UI . MetricSpinner ( {
el : $ ( '#shape-margin-right' ) ,
step : . 1 ,
width : 100 ,
defaultUnit : "cm" ,
value : '0.19 cm' ,
2020-10-28 20:03:01 +00:00
maxValue : 55.87 ,
2016-03-11 00:48:53 +00:00
minValue : 0
} ) ;
this . spnMarginRight . on ( 'change' , _ . bind ( function ( field , newValue , oldValue , eOpts ) {
if ( this . _changedProps ) {
if ( this . _changedProps . get _paddings ( ) === null || this . _changedProps . get _paddings ( ) === undefined )
2016-04-18 12:21:15 +00:00
this . _changedProps . put _paddings ( new Asc . asc _CPaddings ( ) ) ;
2016-03-11 00:48:53 +00:00
this . _changedProps . get _paddings ( ) . put _Right ( Common . Utils . Metric . fnRecalcToMM ( field . getNumberValue ( ) ) ) ;
}
} , this ) ) ;
this . spinners . push ( this . spnMarginRight ) ;
2020-02-25 14:05:09 +00:00
this . radioNofit = new Common . UI . RadioBox ( {
el : $ ( '#shape-radio-nofit' ) ,
name : 'asc-radio-fit' ,
labelText : this . textNofit ,
value : AscFormat . text _fit _No
} ) ;
this . radioNofit . on ( 'change' , _ . bind ( this . onRadioFitChange , this ) ) ;
this . radioShrink = new Common . UI . RadioBox ( {
el : $ ( '#shape-radio-shrink' ) ,
name : 'asc-radio-fit' ,
labelText : this . textShrink ,
value : AscFormat . text _fit _NormAuto
} ) ;
this . radioShrink . on ( 'change' , _ . bind ( this . onRadioFitChange , this ) ) ;
this . radioFit = new Common . UI . RadioBox ( {
el : $ ( '#shape-radio-fit' ) ,
name : 'asc-radio-fit' ,
labelText : this . textResizeFit ,
value : AscFormat . text _fit _Auto
} ) ;
this . radioFit . on ( 'change' , _ . bind ( this . onRadioFitChange , this ) ) ;
2018-08-30 15:41:09 +00:00
// Rotation
this . spnAngle = new Common . UI . MetricSpinner ( {
el : $ ( '#shape-advanced-spin-angle' ) ,
step : 1 ,
width : 80 ,
defaultUnit : "°" ,
value : '0 °' ,
maxValue : 3600 ,
minValue : - 3600
} ) ;
this . chFlipHor = new Common . UI . CheckBox ( {
el : $ ( '#shape-advanced-checkbox-hor' ) ,
labelText : this . textHorizontally
} ) ;
this . chFlipVert = new Common . UI . CheckBox ( {
el : $ ( '#shape-advanced-checkbox-vert' ) ,
labelText : this . textVertically
} ) ;
2016-03-11 00:48:53 +00:00
// Shape
this . _arrCapType = [
2016-04-05 11:52:34 +00:00
{ displayValue : this . textFlat , value : Asc . c _oAscLineCapType . Flat } ,
{ displayValue : this . textRound , value : Asc . c _oAscLineCapType . Round } ,
{ displayValue : this . textSquare , value : Asc . c _oAscLineCapType . Square }
2016-03-11 00:48:53 +00:00
] ;
this . cmbCapType = new Common . UI . ComboBox ( {
el : $ ( '#shape-advanced-cap-type' ) ,
cls : 'input-group-nr' ,
menuStyle : 'min-width: 100px;' ,
editable : false ,
2020-10-13 19:49:04 +00:00
data : this . _arrCapType ,
takeFocusOnClose : true
2016-03-11 00:48:53 +00:00
} ) ;
2016-04-05 11:52:34 +00:00
this . cmbCapType . setValue ( Asc . c _oAscLineCapType . Flat ) ;
2016-03-11 00:48:53 +00:00
this . cmbCapType . on ( 'selected' , _ . bind ( function ( combo , record ) {
if ( this . _changedProps ) {
if ( this . _changedProps . get _stroke ( ) === null )
2016-04-18 12:21:15 +00:00
this . _changedProps . put _stroke ( new Asc . asc _CStroke ( ) ) ;
2016-03-11 00:48:53 +00:00
this . _changedProps . get _stroke ( ) . put _linecap ( record . value ) ;
}
} , this ) ) ;
this . _arrJoinType = [
2016-04-05 11:52:34 +00:00
{ displayValue : this . textRound , value : Asc . c _oAscLineJoinType . Round } ,
{ displayValue : this . textBevel , value : Asc . c _oAscLineJoinType . Bevel } ,
{ displayValue : this . textMiter , value : Asc . c _oAscLineJoinType . Miter }
2016-03-11 00:48:53 +00:00
] ;
this . cmbJoinType = new Common . UI . ComboBox ( {
el : $ ( '#shape-advanced-join-type' ) ,
cls : 'input-group-nr' ,
menuStyle : 'min-width: 100px;' ,
editable : false ,
2020-10-13 19:49:04 +00:00
data : this . _arrJoinType ,
takeFocusOnClose : true
2016-03-11 00:48:53 +00:00
} ) ;
2016-04-05 11:52:34 +00:00
this . cmbJoinType . setValue ( Asc . c _oAscLineJoinType . Round ) ;
2016-03-11 00:48:53 +00:00
this . cmbJoinType . on ( 'selected' , _ . bind ( function ( combo , record ) {
if ( this . _changedProps ) {
if ( this . _changedProps . get _stroke ( ) === null )
2016-04-18 12:21:15 +00:00
this . _changedProps . put _stroke ( new Asc . asc _CStroke ( ) ) ;
2016-03-11 00:48:53 +00:00
this . _changedProps . get _stroke ( ) . put _linejoin ( record . value ) ;
}
} , this ) ) ;
var _arrStyles = [ ] , _arrSize = [ ] ;
for ( var i = 0 ; i < 6 ; i ++ )
_arrStyles . push ( { value : i , offsetx : 80 * i + 10 , offsety : 0 } ) ;
2016-04-05 11:52:34 +00:00
_arrStyles [ 0 ] . type = Asc . c _oAscLineBeginType . None ;
_arrStyles [ 1 ] . type = Asc . c _oAscLineBeginType . Triangle ;
_arrStyles [ 2 ] . type = Asc . c _oAscLineBeginType . Arrow ;
_arrStyles [ 3 ] . type = Asc . c _oAscLineBeginType . Stealth ;
_arrStyles [ 4 ] . type = Asc . c _oAscLineBeginType . Diamond ;
_arrStyles [ 5 ] . type = Asc . c _oAscLineBeginType . Oval ;
2016-03-11 00:48:53 +00:00
for ( i = 0 ; i < 9 ; i ++ )
_arrSize . push ( { value : i , offsetx : 80 + 10 , offsety : 20 * ( i + 1 ) } ) ;
2016-04-05 11:52:34 +00:00
_arrSize [ 0 ] . type = Asc . c _oAscLineBeginSize . small _small ;
_arrSize [ 1 ] . type = Asc . c _oAscLineBeginSize . small _mid ;
_arrSize [ 2 ] . type = Asc . c _oAscLineBeginSize . small _large ;
_arrSize [ 3 ] . type = Asc . c _oAscLineBeginSize . mid _small ;
_arrSize [ 4 ] . type = Asc . c _oAscLineBeginSize . mid _mid ;
_arrSize [ 5 ] . type = Asc . c _oAscLineBeginSize . mid _large ;
_arrSize [ 6 ] . type = Asc . c _oAscLineBeginSize . large _small ;
_arrSize [ 7 ] . type = Asc . c _oAscLineBeginSize . large _mid ;
_arrSize [ 8 ] . type = Asc . c _oAscLineBeginSize . large _large ;
2016-03-11 00:48:53 +00:00
this . btnBeginStyle = new Common . UI . ComboBox ( {
el : $ ( '#shape-advanced-begin-style' ) ,
template : _ . template ( [
'<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style" data-toggle="dropdown">' ,
'<div class="form-control image" style="width: 100px;"></div>' ,
'<div style="display: table-cell;"></div>' ,
2021-01-06 17:33:01 +00:00
'<button type="button" class="btn btn-default"><span class="caret"></span></button>' ,
2016-03-11 00:48:53 +00:00
'</div>'
] . join ( '' ) )
} ) ;
this . btnBeginStyleMenu = ( new Common . UI . Menu ( {
style : 'min-width: 105px;' ,
2019-02-28 10:05:23 +00:00
additionalAlign : this . menuAddAlign ,
2016-03-11 00:48:53 +00:00
items : [
{ template : _ . template ( '<div id="shape-advanced-menu-begin-style" style="width: 105px; margin: 0 5px;"></div>' ) }
]
} ) ) . render ( $ ( '#shape-advanced-begin-style' ) ) ;
this . mnuBeginStylePicker = new Common . UI . DataView ( {
el : $ ( '#shape-advanced-menu-begin-style' ) ,
parentMenu : this . btnBeginStyleMenu ,
store : new Common . UI . DataViewStore ( _arrStyles ) ,
itemTemplate : _ . template ( '<div id="<%= id %>" class="item-arrow" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>' )
} ) ;
this . mnuBeginStylePicker . on ( 'item:click' , _ . bind ( this . onSelectBeginStyle , this ) ) ;
this . _selectStyleItem ( this . btnBeginStyle , null ) ;
this . btnBeginSize = new Common . UI . ComboBox ( {
el : $ ( '#shape-advanced-begin-size' ) ,
template : _ . template ( [
'<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style" data-toggle="dropdown">' ,
'<div class="form-control image" style="width: 100px;"></div>' ,
'<div style="display: table-cell;"></div>' ,
2021-01-06 17:33:01 +00:00
'<button type="button" class="btn btn-default"><span class="caret"></span></button>' ,
2016-03-11 00:48:53 +00:00
'</div>'
] . join ( '' ) )
} ) ;
this . btnBeginSizeMenu = ( new Common . UI . Menu ( {
style : 'min-width: 160px;' ,
2019-02-28 10:05:23 +00:00
additionalAlign : this . menuAddAlign ,
2016-03-11 00:48:53 +00:00
items : [
{ template : _ . template ( '<div id="shape-advanced-menu-begin-size" style="width: 160px; margin: 0 5px;"></div>' ) }
]
} ) ) . render ( $ ( '#shape-advanced-begin-size' ) ) ;
this . mnuBeginSizePicker = new Common . UI . DataView ( {
el : $ ( '#shape-advanced-menu-begin-size' ) ,
parentMenu : this . btnBeginSizeMenu ,
store : new Common . UI . DataViewStore ( _arrSize ) ,
itemTemplate : _ . template ( '<div id="<%= id %>" class="item-arrow" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>' )
} ) ;
this . mnuBeginSizePicker . on ( 'item:click' , _ . bind ( this . onSelectBeginSize , this ) ) ;
this . _selectStyleItem ( this . btnBeginSize , null ) ;
for ( i = 0 ; i < _arrStyles . length ; i ++ )
_arrStyles [ i ] . offsety += 200 ;
for ( i = 0 ; i < _arrSize . length ; i ++ )
_arrSize [ i ] . offsety += 200 ;
this . btnEndStyle = new Common . UI . ComboBox ( {
el : $ ( '#shape-advanced-end-style' ) ,
template : _ . template ( [
'<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style" data-toggle="dropdown">' ,
'<div class="form-control image" style="width: 100px;"></div>' ,
'<div style="display: table-cell;"></div>' ,
2021-01-06 17:33:01 +00:00
'<button type="button" class="btn btn-default"><span class="caret"></span></button>' ,
2016-03-11 00:48:53 +00:00
'</div>'
] . join ( '' ) )
} ) ;
this . btnEndStyleMenu = ( new Common . UI . Menu ( {
style : 'min-width: 105px;' ,
2019-02-28 10:05:23 +00:00
additionalAlign : this . menuAddAlign ,
2016-03-11 00:48:53 +00:00
items : [
{ template : _ . template ( '<div id="shape-advanced-menu-end-style" style="width: 105px; margin: 0 5px;"></div>' ) }
]
} ) ) . render ( $ ( '#shape-advanced-end-style' ) ) ;
this . mnuEndStylePicker = new Common . UI . DataView ( {
el : $ ( '#shape-advanced-menu-end-style' ) ,
parentMenu : this . btnEndStyleMenu ,
store : new Common . UI . DataViewStore ( _arrStyles ) ,
itemTemplate : _ . template ( '<div id="<%= id %>" class="item-arrow" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>' )
} ) ;
this . mnuEndStylePicker . on ( 'item:click' , _ . bind ( this . onSelectEndStyle , this ) ) ;
this . _selectStyleItem ( this . btnEndStyle , null ) ;
this . btnEndSize = new Common . UI . ComboBox ( {
el : $ ( '#shape-advanced-end-size' ) ,
template : _ . template ( [
'<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle combo-arrow-style" data-toggle="dropdown">' ,
'<div class="form-control image" style="width: 100px;"></div>' ,
'<div style="display: table-cell;"></div>' ,
2021-01-06 17:33:01 +00:00
'<button type="button" class="btn btn-default"><span class="caret"></span></button>' ,
2016-03-11 00:48:53 +00:00
'</div>'
] . join ( '' ) )
} ) ;
this . btnEndSizeMenu = ( new Common . UI . Menu ( {
style : 'min-width: 160px;' ,
2019-02-28 10:05:23 +00:00
additionalAlign : this . menuAddAlign ,
2016-03-11 00:48:53 +00:00
items : [
{ template : _ . template ( '<div id="shape-advanced-menu-end-size" style="width: 160px; margin: 0 5px;"></div>' ) }
]
} ) ) . render ( $ ( '#shape-advanced-end-size' ) ) ;
this . mnuEndSizePicker = new Common . UI . DataView ( {
el : $ ( '#shape-advanced-menu-end-size' ) ,
parentMenu : this . btnEndSizeMenu ,
store : new Common . UI . DataViewStore ( _arrSize ) ,
itemTemplate : _ . template ( '<div id="<%= id %>" class="item-arrow" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>' )
} ) ;
this . mnuEndSizePicker . on ( 'item:click' , _ . bind ( this . onSelectEndSize , this ) ) ;
this . _selectStyleItem ( this . btnEndSize , null ) ;
2017-05-26 09:49:33 +00:00
// Columns
this . spnColumns = new Common . UI . MetricSpinner ( {
el : $ ( '#shape-columns-number' ) ,
step : 1 ,
2017-06-19 08:54:26 +00:00
allowDecimal : false ,
2017-05-26 09:49:33 +00:00
width : 100 ,
defaultUnit : "" ,
value : '1' ,
maxValue : 16 ,
minValue : 1
} ) ;
this . spnColumns . on ( 'change' , _ . bind ( function ( field , newValue , oldValue , eOpts ) {
if ( this . _changedProps )
this . _changedProps . asc _putColumnNumber ( field . getNumberValue ( ) ) ;
} , this ) ) ;
this . spnSpacing = new Common . UI . MetricSpinner ( {
el : $ ( '#shape-columns-spacing' ) ,
step : . 1 ,
width : 100 ,
defaultUnit : "cm" ,
value : '0 cm' ,
maxValue : 40.64 ,
minValue : 0
} ) ;
this . spnSpacing . on ( 'change' , _ . bind ( function ( field , newValue , oldValue , eOpts ) {
if ( this . _changedProps )
this . _changedProps . asc _putColumnSpace ( Common . Utils . Metric . fnRecalcToMM ( field . getNumberValue ( ) ) ) ;
} , this ) ) ;
this . spinners . push ( this . spnSpacing ) ;
2017-01-18 13:24:25 +00:00
// Alt Text
this . inputAltTitle = new Common . UI . InputField ( {
el : $ ( '#shape-advanced-alt-title' ) ,
allowBlank : true ,
validateOnBlur : false ,
style : 'width: 100%;'
} ) . on ( 'changed:after' , function ( ) {
me . isAltTitleChanged = true ;
} ) ;
this . textareaAltDescription = this . $window . find ( 'textarea' ) ;
this . textareaAltDescription . keydown ( function ( event ) {
if ( event . keyCode == Common . UI . Keys . RETURN ) {
event . stopPropagation ( ) ;
}
me . isAltDescChanged = true ;
} ) ;
2016-03-11 00:48:53 +00:00
this . afterRender ( ) ;
} ,
2020-10-13 19:49:04 +00:00
getFocusedComponents : function ( ) {
return [
this . spnWidth , this . spnHeight , // 0 tab
2021-04-13 15:20:08 +00:00
this . spnAngle , this . chFlipHor , this . chFlipVert , // 1 tab
2020-10-13 19:49:04 +00:00
this . cmbCapType , this . cmbJoinType , // 2 tab
this . spnMarginTop , this . spnMarginLeft , this . spnMarginBottom , this . spnMarginRight , // 3 tab
this . spnColumns , this . spnSpacing , // 4 tab
this . inputAltTitle , this . textareaAltDescription // 5 tab
] ;
} ,
onCategoryClick : function ( btn , index ) {
Common . Views . AdvancedSettingsWindow . prototype . onCategoryClick . call ( this , btn , index ) ;
var me = this ;
setTimeout ( function ( ) {
switch ( index ) {
case 0 :
me . spnWidth . focus ( ) ;
break ;
case 1 :
me . spnAngle . focus ( ) ;
break ;
case 2 :
me . cmbCapType . focus ( ) ;
break ;
case 3 :
me . spnMarginTop . focus ( ) ;
break ;
case 4 :
me . spnColumns . focus ( ) ;
break ;
case 5 :
me . inputAltTitle . focus ( ) ;
break ;
}
} , 10 ) ;
} ,
2016-03-11 00:48:53 +00:00
afterRender : function ( ) {
this . updateMetricUnit ( ) ;
this . _setDefaults ( this . _originalProps ) ;
2016-04-21 11:47:28 +00:00
if ( this . storageName ) {
var value = Common . localStorage . getItem ( this . storageName ) ;
this . setActiveCategory ( ( value !== null ) ? parseInt ( value ) : 0 ) ;
}
2016-03-11 00:48:53 +00:00
} ,
_setDefaults : function ( props ) {
if ( props ) {
this . spnWidth . setValue ( Common . Utils . Metric . fnRecalcFromMM ( props . get _Width ( ) ) . toFixed ( 2 ) , true ) ;
this . spnHeight . setValue ( Common . Utils . Metric . fnRecalcFromMM ( props . get _Height ( ) ) . toFixed ( 2 ) , true ) ;
if ( props . get _Height ( ) > 0 )
this . _nRatio = props . get _Width ( ) / props . get _Height ( ) ;
2016-05-24 11:45:53 +00:00
var value = props . asc _getLockAspect ( ) ;
this . btnRatio . toggle ( value ) ;
2016-03-11 00:48:53 +00:00
this . _setShapeDefaults ( props ) ;
var margins = props . get _paddings ( ) ;
if ( margins ) {
var val = margins . get _Left ( ) ;
this . spnMarginLeft . setValue ( ( null !== val && undefined !== val ) ? Common . Utils . Metric . fnRecalcFromMM ( val ) : '' , true ) ;
val = margins . get _Top ( ) ;
this . spnMarginTop . setValue ( ( null !== val && undefined !== val ) ? Common . Utils . Metric . fnRecalcFromMM ( val ) : '' , true ) ;
val = margins . get _Right ( ) ;
this . spnMarginRight . setValue ( ( null !== val && undefined !== val ) ? Common . Utils . Metric . fnRecalcFromMM ( val ) : '' , true ) ;
val = margins . get _Bottom ( ) ;
this . spnMarginBottom . setValue ( ( null !== val && undefined !== val ) ? Common . Utils . Metric . fnRecalcFromMM ( val ) : '' , true ) ;
}
2020-02-25 14:05:09 +00:00
value = props . asc _getTextFitType ( ) ;
switch ( value ) {
case AscFormat . text _fit _No :
this . radioNofit . setValue ( true , true ) ;
break ;
case AscFormat . text _fit _Auto :
this . radioFit . setValue ( true , true ) ;
break ;
case AscFormat . text _fit _NormAuto :
this . radioShrink . setValue ( true , true ) ;
break ;
}
2018-08-30 15:41:09 +00:00
this . btnsCategory [ 3 ] . setDisabled ( null === margins ) ; // Margins
2016-03-11 00:48:53 +00:00
2017-06-29 09:15:01 +00:00
var shapetype = props . asc _getType ( ) ;
2018-08-30 15:41:09 +00:00
this . btnsCategory [ 4 ] . setDisabled ( shapetype == 'line' || shapetype == 'bentConnector2' || shapetype == 'bentConnector3'
2017-06-29 09:15:01 +00:00
|| shapetype == 'bentConnector4' || shapetype == 'bentConnector5' || shapetype == 'curvedConnector2'
|| shapetype == 'curvedConnector3' || shapetype == 'curvedConnector4' || shapetype == 'curvedConnector5'
|| shapetype == 'straightConnector1' ) ;
2017-05-26 09:49:33 +00:00
value = props . asc _getColumnNumber ( ) ;
this . spnColumns . setValue ( ( null !== value && undefined !== value ) ? value : '' , true ) ;
value = props . asc _getColumnSpace ( ) ;
this . spnSpacing . setValue ( ( null !== value && undefined !== value ) ? Common . Utils . Metric . fnRecalcFromMM ( value ) : '' , true ) ;
2017-01-18 13:24:25 +00:00
value = props . asc _getTitle ( ) ;
this . inputAltTitle . setValue ( value ? value : '' ) ;
value = props . asc _getDescription ( ) ;
this . textareaAltDescription . val ( value ? value : '' ) ;
2018-08-30 15:41:09 +00:00
value = props . asc _getRot ( ) ;
this . spnAngle . setValue ( ( value == undefined || value === null ) ? '' : Math . floor ( value * 180 / 3.14159265358979 + 0.5 ) , true ) ;
this . chFlipHor . setValue ( props . asc _getFlipH ( ) ) ;
this . chFlipVert . setValue ( props . asc _getFlipV ( ) ) ;
2016-04-18 12:21:15 +00:00
this . _changedProps = new Asc . asc _CShapeProperty ( ) ;
2016-03-11 00:48:53 +00:00
}
} ,
getSettings : function ( ) {
2017-01-18 13:24:25 +00:00
if ( this . isAltTitleChanged )
this . _changedProps . asc _putTitle ( this . inputAltTitle . getValue ( ) ) ;
if ( this . isAltDescChanged )
this . _changedProps . asc _putDescription ( this . textareaAltDescription . val ( ) ) ;
2018-08-30 15:41:09 +00:00
this . _changedProps . asc _putRot ( this . spnAngle . getNumberValue ( ) * 3.14159265358979 / 180 ) ;
this . _changedProps . asc _putFlipH ( this . chFlipHor . getValue ( ) == 'checked' ) ;
this . _changedProps . asc _putFlipV ( this . chFlipVert . getValue ( ) == 'checked' ) ;
2016-03-11 00:48:53 +00:00
Common . localStorage . setItem ( "pe-settings-shaperatio" , ( this . btnRatio . pressed ) ? 1 : 0 ) ;
return { shapeProps : this . _changedProps } ;
} ,
_setShapeDefaults : function ( props ) {
if ( props ) {
var stroke = props . get _stroke ( ) ;
if ( stroke ) {
2018-08-30 15:41:09 +00:00
this . btnsCategory [ 2 ] . setDisabled ( stroke . get _type ( ) == Asc . c _oAscStrokeType . STROKE _NONE ) ; // Weights & Arrows
2017-08-04 11:24:30 +00:00
2016-03-11 00:48:53 +00:00
var value = stroke . get _linejoin ( ) ;
for ( var i = 0 ; i < this . _arrJoinType . length ; i ++ ) {
if ( value == this . _arrJoinType [ i ] . value ) {
this . cmbJoinType . setValue ( value ) ;
break ;
}
}
value = stroke . get _linecap ( ) ;
for ( i = 0 ; i < this . _arrCapType . length ; i ++ ) {
if ( value == this . _arrCapType [ i ] . value ) {
this . cmbCapType . setValue ( value ) ;
break ;
}
}
var canchange = stroke . get _canChangeArrows ( ) ;
this . btnBeginStyle . setDisabled ( ! canchange ) ;
this . btnEndStyle . setDisabled ( ! canchange ) ;
this . btnBeginSize . setDisabled ( ! canchange ) ;
this . btnEndSize . setDisabled ( ! canchange ) ;
if ( canchange ) {
value = stroke . get _linebeginsize ( ) ;
var rec = this . mnuBeginSizePicker . store . findWhere ( { type : value } ) ;
if ( rec ) {
this . _beginSizeIdx = rec . get ( 'value' ) ;
} else {
this . _beginSizeIdx = null ;
this . _selectStyleItem ( this . btnBeginSize , null ) ;
}
value = stroke . get _linebeginstyle ( ) ;
rec = this . mnuBeginStylePicker . store . findWhere ( { type : value } ) ;
if ( rec ) {
this . mnuBeginStylePicker . selectRecord ( rec , true ) ;
this . _updateSizeArr ( this . btnBeginSize , this . mnuBeginSizePicker , rec , this . _beginSizeIdx ) ;
this . _selectStyleItem ( this . btnBeginStyle , rec ) ;
} else
this . _selectStyleItem ( this . btnBeginStyle , null ) ;
value = stroke . get _lineendsize ( ) ;
rec = this . mnuEndSizePicker . store . findWhere ( { type : value } ) ;
if ( rec ) {
this . _endSizeIdx = rec . get ( 'value' ) ;
} else {
this . _endSizeIdx = null ;
this . _selectStyleItem ( this . btnEndSize , null ) ;
}
value = stroke . get _lineendstyle ( ) ;
rec = this . mnuEndStylePicker . store . findWhere ( { type : value } ) ;
if ( rec ) {
this . mnuEndStylePicker . selectRecord ( rec , true ) ;
this . _updateSizeArr ( this . btnEndSize , this . mnuEndSizePicker , rec , this . _endSizeIdx ) ;
this . _selectStyleItem ( this . btnEndStyle , rec ) ;
} else
this . _selectStyleItem ( this . btnEndStyle , null ) ;
} else {
this . _selectStyleItem ( this . btnBeginStyle ) ;
this . _selectStyleItem ( this . btnEndStyle ) ;
this . _selectStyleItem ( this . btnBeginSize ) ;
this . _selectStyleItem ( this . btnEndSize ) ;
}
}
}
} ,
updateMetricUnit : function ( ) {
if ( this . spinners ) {
for ( var i = 0 ; i < this . spinners . length ; i ++ ) {
var spinner = this . spinners [ i ] ;
2016-04-06 13:38:54 +00:00
spinner . setDefaultUnit ( Common . Utils . Metric . getCurrentMetricName ( ) ) ;
2016-04-06 15:17:40 +00:00
spinner . setStep ( Common . Utils . Metric . getCurrentMetric ( ) == Common . Utils . Metric . c _MetricUnits . pt ? 1 : 0.01 ) ;
2016-03-11 00:48:53 +00:00
}
}
this . sizeMax = {
width : Common . Utils . Metric . fnRecalcFromMM ( this . options . sizeMax . width * 10 ) ,
height : Common . Utils . Metric . fnRecalcFromMM ( this . options . sizeMax . height * 10 )
} ;
if ( this . options . sizeOriginal )
this . sizeOriginal = {
width : Common . Utils . Metric . fnRecalcFromMM ( this . options . sizeOriginal . width ) ,
height : Common . Utils . Metric . fnRecalcFromMM ( this . options . sizeOriginal . height )
} ;
} ,
_updateSizeArr : function ( combo , picker , record , sizeidx ) {
if ( record . get ( 'value' ) > 0 ) {
picker . store . each ( function ( rec ) {
rec . set ( { offsetx : record . get ( 'value' ) * 80 + 10 } ) ;
} , this ) ;
combo . setDisabled ( false ) ;
if ( sizeidx !== null ) {
picker . selectByIndex ( sizeidx , true ) ;
this . _selectStyleItem ( combo , picker . store . at ( sizeidx ) ) ;
} else
this . _selectStyleItem ( combo , null ) ;
} else {
this . _selectStyleItem ( combo , null ) ;
combo . setDisabled ( true ) ;
}
} ,
_selectStyleItem : function ( combo , record ) {
var formcontrol = $ ( combo . el ) . find ( '.form-control' ) ;
formcontrol . css ( 'background-position' , ( ( record ) ? ( - record . get ( 'offsetx' ) + 20 ) + 'px' : '0' ) + ' ' + ( ( record ) ? '-' + record . get ( 'offsety' ) + 'px' : '-30px' ) ) ;
} ,
onSelectBeginStyle : function ( picker , view , record ) {
if ( this . _changedProps ) {
if ( this . _changedProps . get _stroke ( ) === null )
2016-04-18 12:21:15 +00:00
this . _changedProps . put _stroke ( new Asc . asc _CStroke ( ) ) ;
2016-03-11 00:48:53 +00:00
this . _changedProps . get _stroke ( ) . put _linebeginstyle ( record . get ( 'type' ) ) ;
}
if ( this . _beginSizeIdx === null || this . _beginSizeIdx === undefined )
this . _beginSizeIdx = 4 ;
this . _updateSizeArr ( this . btnBeginSize , this . mnuBeginSizePicker , record , this . _beginSizeIdx ) ;
this . _selectStyleItem ( this . btnBeginStyle , record ) ;
} ,
onSelectBeginSize : function ( picker , view , record ) {
if ( this . _changedProps ) {
if ( this . _changedProps . get _stroke ( ) === null )
2016-04-18 12:21:15 +00:00
this . _changedProps . put _stroke ( new Asc . asc _CStroke ( ) ) ;
2016-03-11 00:48:53 +00:00
this . _changedProps . get _stroke ( ) . put _linebeginsize ( record . get ( 'type' ) ) ;
}
this . _beginSizeIdx = record . get ( 'value' ) ;
this . _selectStyleItem ( this . btnBeginSize , record ) ;
} ,
onSelectEndStyle : function ( picker , view , record ) {
if ( this . _changedProps ) {
if ( this . _changedProps . get _stroke ( ) === null )
2016-04-18 12:21:15 +00:00
this . _changedProps . put _stroke ( new Asc . asc _CStroke ( ) ) ;
2016-03-11 00:48:53 +00:00
this . _changedProps . get _stroke ( ) . put _lineendstyle ( record . get ( 'type' ) ) ;
}
if ( this . _endSizeIdx === null || this . _endSizeIdx === undefined )
this . _endSizeIdx = 4 ;
this . _updateSizeArr ( this . btnEndSize , this . mnuEndSizePicker , record , this . _endSizeIdx ) ;
this . _selectStyleItem ( this . btnEndStyle , record ) ;
} ,
onSelectEndSize : function ( picker , view , record ) {
if ( this . _changedProps ) {
if ( this . _changedProps . get _stroke ( ) === null )
2016-04-18 12:21:15 +00:00
this . _changedProps . put _stroke ( new Asc . asc _CStroke ( ) ) ;
2016-03-11 00:48:53 +00:00
this . _changedProps . get _stroke ( ) . put _lineendsize ( record . get ( 'type' ) ) ;
}
this . _endSizeIdx = record . get ( 'value' ) ;
this . _selectStyleItem ( this . btnEndSize , record ) ;
} ,
2020-02-25 14:05:09 +00:00
onRadioFitChange : function ( field , newValue , eOpts ) {
if ( newValue && this . _changedProps ) {
this . _changedProps . asc _putTextFitType ( field . options . value ) ;
}
} ,
2016-03-11 00:48:53 +00:00
textRound : 'Round' ,
textMiter : 'Miter' ,
textSquare : 'Square' ,
textFlat : 'Flat' ,
textBevel : 'Bevel' ,
textTitle : 'Shape - Advanced Settings' ,
txtNone : 'None' ,
textWeightArrows : 'Weights & Arrows' ,
textArrows : 'Arrows' ,
textLineStyle : 'Line Style' ,
textCapType : 'Cap Type' ,
textJoinType : 'Join Type' ,
textBeginStyle : 'Begin Style' ,
textBeginSize : 'Begin Size' ,
textEndStyle : 'End Style' ,
textEndSize : 'End Size' ,
textSize : 'Size' ,
textWidth : 'Width' ,
textHeight : 'Height' ,
textKeepRatio : 'Constant Proportions' ,
textTop : 'Top' ,
textLeft : 'Left' ,
textBottom : 'Bottom' ,
textRight : 'Right' ,
2017-01-18 13:24:25 +00:00
strMargins : 'Text Padding' ,
textAlt : 'Alternative Text' ,
textAltTitle : 'Title' ,
textAltDescription : 'Description' ,
2017-05-26 09:49:33 +00:00
textAltTip : 'The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, autoshape, chart or table.' ,
strColumns : 'Columns' ,
textSpacing : 'Spacing between columns' ,
2018-08-30 15:41:09 +00:00
textColNumber : 'Number of columns' ,
textRotation : 'Rotation' ,
textAngle : 'Angle' ,
textFlipped : 'Flipped' ,
textHorizontally : 'Horizontally' ,
2020-02-25 14:05:09 +00:00
textVertically : 'Vertically' ,
textTextBox : 'Text Box' ,
textAutofit : 'AutoFit' ,
textNofit : 'Do not Autofit' ,
textShrink : 'Shrink text on overflow' ,
textResizeFit : 'Resize shape to fit text'
2017-01-18 13:24:25 +00:00
2016-03-11 00:48:53 +00:00
} , PE . Views . ShapeSettingsAdvanced || { } ) ) ;
} ) ;