/* * * (c) Copyright Ascensio System Limited 2010-2017 * * 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 * */ /** * ChartSettings.js * * Created by Julia Radzhabova on 4/11/14 * Copyright (c) 2014 Ascensio System SIA. All rights reserved. * */ define([ 'text!presentationeditor/main/app/template/ChartSettings.template', 'jquery', 'underscore', 'backbone', 'common/main/lib/component/Button', 'common/main/lib/component/ComboDataView', 'presentationeditor/main/app/view/ChartSettingsAdvanced' ], function (menuTemplate, $, _, Backbone) { 'use strict'; PE.Views.ChartSettings = Backbone.View.extend(_.extend({ el: '#id-chart-settings', // Compile our stats template template: _.template(menuTemplate), // Delegated events for creating new items, and clearing completed ones. events: { }, options: { alias: 'ChartSettings' }, initialize: function () { this._initSettings = true; this._state = { Width: 0, Height: 0, ChartStyle: 1, ChartType: -1, SeveralCharts: false, DisabledControls: false, keepRatio: false }; this._nRatio = 1; this.spinners = []; this.lockedControls = []; this._locked = false; this._noApply = false; this._originalProps = null; this.render(); }, render: function () { var el = $(this.el); el.html(this.template({ scope: this })); }, setApi: function(api) { this.api = api; if (this.api) { this.api.asc_registerCallback('asc_onUpdateChartStyles', _.bind(this._onUpdateChartStyles, this)); } return this; }, ChangeSettings: function(props) { if (this._initSettings) this.createDelayedElements(); this.disableControls(this._locked); if (props){ this._originalProps = new Asc.CAscChartProp(props); this._noApply = true; var value = props.get_SeveralCharts() || this._locked; if (this._state.SeveralCharts!==value) { this.btnEditData.setDisabled(value); this._state.SeveralCharts=value; } value = props.get_SeveralChartTypes(); if (this._state.SeveralCharts && value) { this.btnChartType.setIconCls(''); this._state.ChartType = null; } else { var type = props.getType(); if (this._state.ChartType !== type) { var record = this.mnuChartTypePicker.store.findWhere({type: type}); this.mnuChartTypePicker.selectRecord(record, true); if (record) { this.btnChartType.setIconCls('item-chartlist ' + record.get('iconCls')); } else this.btnChartType.setIconCls(''); this.updateChartStyles(this.api.asc_getChartPreviews(type)); this._state.ChartType = type; } } value = props.get_SeveralChartStyles(); if (this._state.SeveralCharts && value) { this.cmbChartStyle.fieldPicker.deselectAll(); this.cmbChartStyle.menuPicker.deselectAll(); this._state.ChartStyle = null; } else { value = props.getStyle(); if (this._state.ChartStyle!==value || this._isChartStylesChanged) { this.cmbChartStyle.suspendEvents(); var rec = this.cmbChartStyle.menuPicker.store.findWhere({data: value}); this.cmbChartStyle.menuPicker.selectRecord(rec); this.cmbChartStyle.resumeEvents(); if (this._isChartStylesChanged) { if (rec) this.cmbChartStyle.fillComboView(this.cmbChartStyle.menuPicker.getSelectedRec()[0],true); else this.cmbChartStyle.fillComboView(this.cmbChartStyle.menuPicker.store.at(0), true); } this._state.ChartStyle=value; } } this._isChartStylesChanged = false; this._noApply = false; value = props.get_Width(); if ( Math.abs(this._state.Width-value)>0.001 || (this._state.Width===null || value===null)&&(this._state.Width!==value)) { this.spnWidth.setValue((value!==null) ? Common.Utils.Metric.fnRecalcFromMM(value) : '', true); this._state.Width = value; } value = props.get_Height(); if ( Math.abs(this._state.Height-value)>0.001 || (this._state.Height===null || value===null)&&(this._state.Height!==value)) { this.spnHeight.setValue((value!==null) ? Common.Utils.Metric.fnRecalcFromMM(value) : '', true); this._state.Height = value; } if (props.get_Height()>0) this._nRatio = props.get_Width()/props.get_Height(); value = props.asc_getLockAspect(); if (this._state.keepRatio!==value) { this.btnRatio.toggle(value); this._state.keepRatio=value; } } }, updateMetricUnit: function() { if (this.spinners) { for (var i=0; i') } ] }) }); this.btnChartType.on('render:after', function(btn) { me.mnuChartTypePicker = new Common.UI.DataView({ el: $('#id-chart-menu-type'), parentMenu: btn.menu, restoreHeight: 421, groups: new Common.UI.DataViewGroupStore([ { id: 'menu-chart-group-bar', caption: me.textColumn }, { id: 'menu-chart-group-line', caption: me.textLine }, { id: 'menu-chart-group-pie', caption: me.textPie }, { id: 'menu-chart-group-hbar', caption: me.textBar }, { id: 'menu-chart-group-area', caption: me.textArea, inline: true }, { id: 'menu-chart-group-scatter', caption: me.textPoint, inline: true }, { id: 'menu-chart-group-stock', caption: me.textStock, inline: true } // { id: 'menu-chart-group-surface', caption: me.textSurface} ]), store: new Common.UI.DataViewStore([ { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal, iconCls: 'column-normal', selected: true}, { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStacked, iconCls: 'column-stack'}, { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStackedPer, iconCls: 'column-pstack'}, { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal3d, iconCls: 'column-3d-normal'}, { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStacked3d, iconCls: 'column-3d-stack'}, { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStackedPer3d, iconCls: 'column-3d-pstack'}, { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal3dPerspective, iconCls: 'column-3d-normal-per'}, { group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineNormal, iconCls: 'line-normal'}, { group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineStacked, iconCls: 'line-stack'}, { group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineStackedPer, iconCls: 'line-pstack'}, { group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.line3d, iconCls: 'line-3d'}, { group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.pie, iconCls: 'pie-normal'}, { group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.doughnut, iconCls: 'pie-doughnut'}, { group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.pie3d, iconCls: 'pie-3d-normal'}, { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarNormal, iconCls: 'bar-normal'}, { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStacked, iconCls: 'bar-stack'}, { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStackedPer, iconCls: 'bar-pstack'}, { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarNormal3d, iconCls: 'bar-3d-normal'}, { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStacked3d, iconCls: 'bar-3d-stack'}, { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStackedPer3d, iconCls: 'bar-3d-pstack'}, { group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaNormal, iconCls: 'area-normal'}, { group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaStacked, iconCls: 'area-stack'}, { group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaStackedPer, iconCls: 'area-pstack'}, { group: 'menu-chart-group-scatter', type: Asc.c_oAscChartTypeSettings.scatter, iconCls: 'point-normal'}, { group: 'menu-chart-group-stock', type: Asc.c_oAscChartTypeSettings.stock, iconCls: 'stock-normal'} // { group: 'menu-chart-group-surface', type: Asc.c_oAscChartTypeSettings.surfaceNormal, iconCls: 'surface-normal'}, // { group: 'menu-chart-group-surface', type: Asc.c_oAscChartTypeSettings.surfaceWireframe, iconCls: 'surface-wireframe'}, // { group: 'menu-chart-group-surface', type: Asc.c_oAscChartTypeSettings.contourNormal, iconCls: 'contour-normal'}, // { group: 'menu-chart-group-surface', type: Asc.c_oAscChartTypeSettings.contourWireframe, iconCls: 'contour-wireframe'} ]), itemTemplate: _.template('
') }); }); this.btnChartType.render($('#chart-button-type')); this.mnuChartTypePicker.on('item:click', _.bind(this.onSelectType, this, this.btnChartType)); this.lockedControls.push(this.btnChartType); this.btnEditData = new Common.UI.Button({ el: $('#chart-button-edit-data') }); this.btnEditData.on('click', _.bind(this.setEditData, this)); this.lockedControls.push(this.btnEditData); this.spnWidth = new Common.UI.MetricSpinner({ el: $('#chart-spin-width'), step: .1, width: 78, defaultUnit : "cm", value: '3 cm', maxValue: 55.88, minValue: 0 }); this.spinners.push(this.spnWidth); this.lockedControls.push(this.spnWidth); this.spnHeight = new Common.UI.MetricSpinner({ el: $('#chart-spin-height'), step: .1, width: 78, defaultUnit : "cm", value: '3 cm', maxValue: 55.88, minValue: 0 }); this.spinners.push(this.spnHeight); this.lockedControls.push(this.spnHeight); this.spnWidth.on('change', _.bind(this.onWidthChange, this)); this.spnHeight.on('change', _.bind(this.onHeightChange, this)); this.btnRatio = new Common.UI.Button({ cls: 'btn-toolbar', iconCls: 'advanced-btn-ratio', style: 'margin-bottom: 1px;', enableToggle: true, hint: this.textKeepRatio }); this.btnRatio.render($('#chart-button-ratio')) ; this.lockedControls.push(this.btnRatio); this.btnRatio.on('click', _.bind(function(btn, e) { if (btn.pressed && this.spnHeight.getNumberValue()>0) { this._nRatio = this.spnWidth.getNumberValue()/this.spnHeight.getNumberValue(); } if (this.api) { var props = new Asc.CAscChartProp(); props.asc_putLockAspect(btn.pressed); this.api.ChartApply(props); } this.fireEvent('editcomplete', this); }, this)); this.linkAdvanced = $('#chart-advanced-link'); $(this.el).on('click', '#chart-advanced-link', _.bind(this.openAdvancedSettings, this)); }, createDelayedElements: function() { this.createDelayedControls(); this.updateMetricUnit(); this._initSettings = false; }, setEditData: function() { var diagramEditor = PE.getController('Common.Controllers.ExternalDiagramEditor').getView('Common.Views.ExternalDiagramEditor'); if (diagramEditor) { diagramEditor.setEditMode(true); diagramEditor.show(); var chart = this.api.asc_getChartObject(); if (chart) { diagramEditor.setChartData(new Asc.asc_CChartBinary(chart)); } } }, onSelectType: 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.btnChartType.setIconCls('item-chartlist ' + rawData.iconCls); this._state.ChartType = -1; if (this.api && !this._noApply) { var props = new Asc.CAscChartProp(); props.changeType(rawData.type); this.api.ChartApply(props); } this.fireEvent('editcomplete', this); }, onSelectStyle: function(combo, record) { if (this._noApply) return; if (this.api && !this._noApply) { var props = new Asc.CAscChartProp(); props.putStyle(record.get('data')); this.api.ChartApply(props); } this.fireEvent('editcomplete', this); }, _onUpdateChartStyles: function() { if (this.api && this._state.ChartType!==null && this._state.ChartType>-1) this.updateChartStyles(this.api.asc_getChartPreviews(this._state.ChartType)); }, updateChartStyles: function(styles) { var me = this; this._isChartStylesChanged = true; if (!this.cmbChartStyle) { this.cmbChartStyle = new Common.UI.ComboDataView({ itemWidth: 50, itemHeight: 50, menuMaxHeight: 270, enableKeyEvents: true, cls: 'combo-chart-style' }); this.cmbChartStyle.render($('#chart-combo-style')); this.cmbChartStyle.openButton.menu.cmpEl.css({ 'min-width': 178, 'max-width': 178 }); this.cmbChartStyle.on('click', _.bind(this.onSelectStyle, this)); this.cmbChartStyle.openButton.menu.on('show:after', function () { me.cmbChartStyle.menuPicker.scroller.update({alwaysVisibleY: true}); }); this.lockedControls.push(this.cmbChartStyle); } if (styles && styles.length>0){ var stylesStore = this.cmbChartStyle.menuPicker.store; if (stylesStore) { var count = stylesStore.length; if (count>0 && count==styles.length) { var data = stylesStore.models; _.each(styles, function(style, index){ data[index].set('imageUrl', style.asc_getImageUrl()); }); } else { var stylearray = [], selectedIdx = -1; _.each(styles, function(item, index){ stylearray.push({ imageUrl: item.asc_getImageUrl(), data : item.asc_getStyle(), tip : me.textStyle + ' ' + item.asc_getStyle() }); }); stylesStore.reset(stylearray, {silent: false}); } } } }, onWidthChange: function(field, newValue, oldValue, eOpts){ var w = field.getNumberValue(); var h = this.spnHeight.getNumberValue(); if (this.btnRatio.pressed) { h = w/this._nRatio; if (h>this.spnHeight.options.maxValue) { h = this.spnHeight.options.maxValue; w = h * this._nRatio; this.spnWidth.setValue(w, true); } this.spnHeight.setValue(h, true); } if (this.api) { var props = new Asc.CAscChartProp(); props.put_Width(Common.Utils.Metric.fnRecalcToMM(w)); props.put_Height(Common.Utils.Metric.fnRecalcToMM(h)); this.api.ChartApply(props); } this.fireEvent('editcomplete', this); }, onHeightChange: function(field, newValue, oldValue, eOpts){ var h = field.getNumberValue(), w = this.spnWidth.getNumberValue(); if (this.btnRatio.pressed) { w = h * this._nRatio; if (w>this.spnWidth.options.maxValue) { w = this.spnWidth.options.maxValue; h = w/this._nRatio; this.spnHeight.setValue(h, true); } this.spnWidth.setValue(w, true); } if (this.api) { var props = new Asc.CAscChartProp(); props.put_Width(Common.Utils.Metric.fnRecalcToMM(w)); props.put_Height(Common.Utils.Metric.fnRecalcToMM(h)); this.api.ChartApply(props); } this.fireEvent('editcomplete', this); }, openAdvancedSettings: function(e) { if (this.linkAdvanced.hasClass('disabled')) return; var me = this; var win; if (me.api && !this._locked){ var selectedElements = me.api.getSelectedElements(); if (selectedElements && selectedElements.length>0){ var elType, elValue; for (var i = selectedElements.length - 1; i >= 0; i--) { elType = selectedElements[i].get_ObjectType(); elValue = selectedElements[i].get_ObjectValue(); if (Asc.c_oAscTypeSelectElement.Chart == elType) { (new PE.Views.ChartSettingsAdvanced( { chartProps: elValue, handler: function(result, value) { if (result == 'ok') { if (me.api) { me.api.ChartApply(value.chartProps); } } me.fireEvent('editcomplete', me); } })).show(); break; } } } } }, setLocked: function (locked) { this._locked = locked; }, disableControls: function(disable) { if (this._initSettings) return; if (this._state.DisabledControls!==disable) { this._state.DisabledControls = disable; _.each(this.lockedControls, function(item) { item.setDisabled(disable); }); this.linkAdvanced.toggleClass('disabled', disable); } }, textKeepRatio: 'Constant Proportions', textSize: 'Size', textWidth: 'Width', textHeight: 'Height', textEditData: 'Edit Data', textChartType: 'Change Chart Type', textLine: 'Line', textColumn: 'Column', textBar: 'Bar', textArea: 'Area', textPie: 'Pie', textPoint: 'XY (Scatter)', textStock: 'Stock', textStyle: 'Style', textAdvanced: 'Show advanced settings', textSurface: 'Surface' }, PE.Views.ChartSettings || {})); });