This commit is contained in:
nikita_bartoshuk
2025-12-25 14:57:28 +03:00
parent 2219e99deb
commit f265c7d46b
11 changed files with 115 additions and 70 deletions

View File

@ -214,6 +214,7 @@ define([
Common.NotificationCenter.on('more:toggle', _.bind(this.onMoreToggle, this));
Common.NotificationCenter.on('tab:active', _.bind(this.onTabActive, this));
Common.NotificationCenter.on('window:resize', _.bind(this.startCheckSize, this));
Common.NotificationCenter.on('uitheme:changed', _.bind(this.startCheckSize, this));
me.checkSize();
me.onResize();
me.rendered = true;

View File

@ -157,11 +157,7 @@ define([
Common.NotificationCenter.on('app:repaint', _.bind(function() {
this.repaintMoreBtns();
}, this));
Common.NotificationCenter.on('uitheme:changed', _.bind(function() {
this.clearActiveData();
this.processPanelVisible();
this.repaintMoreBtns();
}, this));
Common.NotificationCenter.on('uitheme:changed', _.bind(this.onThemeChanged, this));
},
afterRender: function() {
@ -364,7 +360,7 @@ define([
}
this.fireEvent('tab:active', [tab]);
Common.NotificationCenter.trigger('tab:active',[tab]);
Common.NotificationCenter.trigger('tab:active', tab);
}
},
@ -1053,6 +1049,12 @@ define([
for (var btn in btnsMore) {
btnsMore[btn] && btnsMore[btn].isActive() && btnsMore[btn].toggle(false);
}
},
onThemeChanged: function(e) {
this.clearActiveData();
this.processPanelVisible();
this.repaintMoreBtns();
}
};
}()));

View File

@ -61,7 +61,6 @@ define([
};
this._nRatio = 1;
this.spinners = [];
this.chPoints = [];
this.lockedControls = [];
this._locked = false;
this.defColor = {color: '4f81bd', effectId: 24};
@ -79,7 +78,11 @@ define([
'charttab:editdata': _.bind(this.setEditData, this),
'charttab:updatedata': _.bind(this.onUpdateData, this),
'charttab:editdataext': _.bind(this.onEditDataExt, this),
'charttab:selectstyle': _.bind(this.onSelectStyle, this),
},
'Toolbar': {
'tab:active': _.bind(this.onActiveTab, this)
}
});
},
@ -211,6 +214,8 @@ define([
this.api.asc_registerCallback('asc_onUpdateChartStyles', _.bind(this._onUpdateChartStyles, this));
this.api.asc_registerCallback('asc_onStartUpdateExternalReference', _.bind(this.onStartUpdateExternalReference, this));
Common.NotificationCenter.on('cells:range', _.bind(this.onCellsRange, this));
Common.NotificationCenter.on('uitheme:changed', _.bind(this.onThemeChanged, this));
}
return this;
},
@ -431,12 +436,6 @@ define([
var me = this;
this._isChartStylesChanged = true;
this.view.chartStyles.on('click', _.bind(this.onSelectStyle, this));
this.view.chartStyles.openButton.menu.on('show:after', function () {
me.view.chartStyles.menuPicker.scroller.update({alwaysVisibleY: true});
});
this.view.lockedControls.push(this.view.chartStyles);
if (styles && styles.length>0){
var stylesStore = this.view.chartStyles.menuPicker.store;
if (stylesStore) {
@ -480,6 +479,7 @@ define([
},
setConfig: function(config) {
this.toolbar = config.toolbar;
this.view = this.createView('Common.Views.ChartTab', {
toolbar: config.toolbar.toolbar
});
@ -551,5 +551,19 @@ define([
this.rangeSelectionMode = (status != Asc.c_oAscSelectionDialogType.None);
},
onActiveTab: function(tab) {
if (tab==='charttab' && this._themeChanged!==false) {
this.onThemeChanged();
}
},
onThemeChanged: function() {
this._themeChanged = !(this.toolbar && this.toolbar.toolbar && this.toolbar.toolbar.isTabActive('charttab'));
if (!this._themeChanged && this.view) {
this.view.onThemeChanged();
this.toolbar.toolbar.onThemeChanged();
}
}
}, Common.Controllers.ChartTab || {}));
});

View File

@ -44,28 +44,28 @@ define([
], function () {
'use strict';
Common.Views.ChartTab = Common.UI.BaseView.extend(_.extend((function(){
var template = '<section id="chart-design-panel1" class="panel" data-tab="charttab" role="tabpanel" aria-labelledby="view">' +
var template = '<section id="chart-design-panel" class="panel" data-tab="charttab" role="tabpanel" aria-labelledby="view">' +
'<div class="group">' +
'<span class="btn-slot text x-huge" id="slot-btn-chart-elements1"></span>' +
'<span class="btn-slot text x-huge" id="slot-btn-chart-elements"></span>' +
'</div>' +
'<div class="separator long"></div>' +
'<div class="group">' +
'<span class="btn-slot text x-huge" id="slot-btn-edit-data1"></span>' +
'<span class="btn-slot text x-huge" id="slot-btn-edit-data"></span>' +
'</div>' +
'<div class="group">' +
'<span class="btn-slot text x-huge" id="slot-btn-edit-data-ext"></span>' +
'<span class="btn-slot text x-huge" id="slot-btn-update-data"></span>' +
'</div>' +
'<div class="separator long"></div>' +
'<div class="group flex small" id="slot-field-chart-styles1" style="min-width: 100px; width: 448px" data-group-width="448px">' +
'<div class="group flex small" id="slot-field-chart-styles" style="min-width: 100px; width: 448px" data-group-width="448px">' +
'</div>' +
'<div class="separator long separator-chart-styles"></div>' +
'<div class="group small">' +
'<div class="elset">' +
'<span class="btn-slot text font-size-normal" id="slot-btn-chart-type1"></span>' +
'<span class="btn-slot text font-size-normal" id="slot-btn-chart-type"></span>' +
'</div>' +
'<div class="elset">' +
'<span class="btn-slot text font-size-normal" id="slot-btn-chart-advanced-settings1"></span>' +
'<span class="btn-slot text font-size-normal" id="slot-btn-chart-advanced-settings"></span>' +
'</div>' +
'</div>' +
'<div class="separator long"></div>' +
@ -79,30 +79,30 @@ define([
) +
'<div class="group small">' +
'<div class="elset" style="text-align: center;">' +
'<span class="btn-slot text font-size-normal" id="slot-lbl-width1" style="text-align: center;margin-top: 2px;"></span>' +
'<span class="btn-slot text font-size-normal" id="slot-lbl-width" style="text-align: center;margin-top: 2px;"></span>' +
'</div>' +
'<div class="elset" style="text-align: center;">' +
'<span class="btn-slot text font-size-normal" id="slot-lbl-height1" style="text-align: center;margin-top: 2px;"></span>' +
'<span class="btn-slot text font-size-normal" id="slot-lbl-height" style="text-align: center;margin-top: 2px;"></span>' +
'</div>' +
'</div>' +
'<div class="group small">' +
'<div class="elset">' +
'<div id="id-chart-spin-width1"></div>' +
'<div id="id-chart-spin-width"></div>' +
'</div>' +
'<div class="elset">' +
'<div id="id-chart-spin-height1"></div>' +
'<div id="id-chart-spin-height"></div>' +
'</div>' +
'</div>' +
'<div class="group small">' +
'<div class="elset">' +
'<span class="btn-slot text" id="slot-chk-ratio1"></span>' +
'<span class="btn-slot text" id="slot-chk-ratio"></span>' +
'</div>' +
'<div class="elset">' +
'</div>' +
'</div>' +
'<div class="separator long separator-chart-3d"></div>' +
'<div class="group">' +
'<span class="btn-slot text x-huge" id="slot-btn-chart-3d-settings1"></span>' +
'<span class="btn-slot text x-huge" id="slot-btn-chart-3d-settings"></span>' +
'</div>' +
'</section>';
function setEvents() {
@ -143,6 +143,9 @@ define([
me.btnUpdateData.on('click', function (btn, e) {
me.fireEvent('charttab:updatedata');
});
me.chartStyles.on('click', function (combo, record) {
me.fireEvent('charttab:selectstyle', [combo, record]);
})
}
return {
initialize: function (options) {
@ -616,10 +619,13 @@ define([
this.chartStyles = new Common.UI.ComboDataView({
cls : 'combo-chart-template',
style : 'min-width: 90px; max-width: 496px;',
style : 'min-width: 90px; width: 438; max-width: 438px;',
enableKeyEvents : true,
delayRenderTips : true,
itemWidth : 50,
itemHeight : 50,
minMenuColumn : 4,
maxMenuColumn : 7,
menuMaxHeight : 300,
groups : new Common.UI.DataViewGroupStore(),
autoWidth : true,
@ -628,11 +634,11 @@ define([
beforeOpenHandler: function(e) {
var cmp = this,
menu = cmp.openButton.menu,
minMenuColumn = 4;
minMenuColumn = cmp.options.minMenuColumn;
if (menu.cmpEl) {
var itemEl = $(cmp.cmpEl.find('.dataview.inner .style').get(0)).parent();
var itemMargin = 8;
var itemMargin = parseFloat(itemEl.css('margin-left')) + parseFloat(itemEl.css('margin-right'));
var itemWidth = itemEl.is(':visible') ? parseFloat(itemEl.css('width')) :
(cmp.itemWidth + parseFloat(itemEl.css('padding-left')) + parseFloat(itemEl.css('padding-right')) +
parseFloat(itemEl.css('border-left-width')) + parseFloat(itemEl.css('border-right-width')));
@ -642,10 +648,10 @@ define([
columnCount = columnCount < minCount ? minCount : columnCount;
menu.menuAlignEl = cmp.cmpEl;
menu.menuAlign = 'tl-tl';
var menuWidth = columnCount * (itemMargin + itemWidth) + 16, // for scroller
var menuWidth = columnCount * (itemMargin + itemWidth) + 14, // for scroller
buttonOffsetLeft = Common.Utils.getOffset(cmp.openButton.$el).left;
if (menuWidth>Common.Utils.innerWidth())
menuWidth = Math.max(Math.floor((Common.Utils.innerWidth()-16)/(itemMargin + itemWidth)), 2) * (itemMargin + itemWidth) + 16;
menuWidth = Math.max(Math.floor((Common.Utils.innerWidth()-14)/(itemMargin + itemWidth)), 2) * (itemMargin + itemWidth) + 14;
var offset = cmp.cmpEl.width() - cmp.openButton.$el.width() - Math.min(menuWidth, buttonOffsetLeft);
if (Common.UI.isRTL()) {
offset = cmp.openButton.$el.width() + parseFloat($(cmp.$el.find('.combo-dataview').get(0)).css('padding-left'));
@ -662,6 +668,9 @@ define([
dataHintDirection: 'bottom',
dataHintOffset: '-16, 0'
});
this.chartStyles.openButton.menu.on('show:after', function () {
me.chartStyles.menuPicker.scroller.update({alwaysVisibleY: true});
});
this.lockedControls.push(this.chartStyles);
this.btnChartType = new Common.UI.Button({
@ -766,11 +775,6 @@ define([
Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
},
onCheckStyleChange: function(type, stateName, field, newValue, oldValue, eOpts) {
var me = this;
me.fireEvent('tabledesigntab:stylechange', [type, stateName, newValue]);
},
render: function (el) {
if ( el ) el.html( this.getPanel() );
return this;
@ -785,19 +789,19 @@ define([
Common.Utils.injectComponent($host.findById(id), cmp);
};
_injectComponent('#id-chart-spin-width1', this.spnWidth);
_injectComponent('#id-chart-spin-height1', this.spnHeight);
this.btnChartElements && this.btnChartElements.render($host.find('#slot-btn-chart-elements1'));
this.btnEditData && this.btnEditData.render($host.find('#slot-btn-edit-data1'));
_injectComponent('#id-chart-spin-width', this.spnWidth);
_injectComponent('#id-chart-spin-height', this.spnHeight);
this.btnChartElements && this.btnChartElements.render($host.find('#slot-btn-chart-elements'));
this.btnEditData && this.btnEditData.render($host.find('#slot-btn-edit-data'));
this.btnEditDataExt && this.btnEditDataExt.render($host.find('#slot-btn-edit-data-ext'));
this.btnUpdateData && this.btnUpdateData.render($host.find('#slot-btn-update-data'));
this.chartStyles.render(this.$el.find('#slot-field-chart-styles1'));
this.btnChartType && this.btnChartType.render($host.find('#slot-btn-chart-type1'));
this.btnAdvancedSettings && this.btnAdvancedSettings.render($host.find('#slot-btn-chart-advanced-settings1'));
this.lblWidth && this.lblWidth.render($host.find('#slot-lbl-width1'));
this.lblHeight && this.lblHeight.render($host.find('#slot-lbl-height1'));
this.chRatio && this.chRatio.render($host.find('#slot-chk-ratio1'));
this.btn3DSettings && this.btn3DSettings.render($host.find('#slot-btn-chart-3d-settings1'));
this.chartStyles && this.chartStyles.render(this.$el.find('#slot-field-chart-styles'));
this.btnChartType && this.btnChartType.render($host.find('#slot-btn-chart-type'));
this.btnAdvancedSettings && this.btnAdvancedSettings.render($host.find('#slot-btn-chart-advanced-settings'));
this.lblWidth && this.lblWidth.render($host.find('#slot-lbl-width'));
this.lblHeight && this.lblHeight.render($host.find('#slot-lbl-height'));
this.chRatio && this.chRatio.render($host.find('#slot-chk-ratio'));
this.btn3DSettings && this.btn3DSettings.render($host.find('#slot-btn-chart-3d-settings'));
return this.$el;
},
@ -808,13 +812,13 @@ define([
this.btnChartType.setMenu( new Common.UI.Menu({
style: 'width: 364px;padding-top: 12px;',
items: [
{template: _.template('<div id="id-chart-menu-insertchart1" class="menu-insertchart"></div>')}
{template: _.template('<div id="id-chart-menu-insertchart" class="menu-insertchart"></div>')}
]
}));
var onShowBefore = function(menu) {
var picker = new Common.UI.DataView({
el: $('#id-chart-menu-insertchart1'),
el: $('#id-chart-menu-insertchart'),
parentMenu: menu,
outerMenu: {menu: menu, index:0},
showLast: false,
@ -863,6 +867,22 @@ define([
}
}, this);
},
onThemeChanged: function() {
var cmp = this.chartStyles;
if (cmp && cmp.cmpEl) {
var itemEl = $(cmp.cmpEl.find('.dataview.inner .style').get(0)).parent(),
fieldpicker = cmp.cmpEl.find('.field-picker'),
itemMargin = parseFloat(itemEl.css('margin-left')) + parseFloat(itemEl.css('margin-right')),
itemWidth = itemEl.is(':visible') ? parseFloat(itemEl.css('width')) :
(cmp.itemWidth + parseFloat(itemEl.css('padding-left')) + parseFloat(itemEl.css('padding-right')) +
parseFloat(itemEl.css('border-left-width')) + parseFloat(itemEl.css('border-right-width'))),
maxwidth = (itemWidth + itemMargin) * cmp.options.maxMenuColumn + parseFloat(fieldpicker.css('padding-right')) +
parseFloat(fieldpicker.css('padding-left')) + cmp.openButton.$el.width();
cmp.cmpEl.css('max-width', maxwidth + 'px');
cmp.startCheckSize();
}
},
}
}()), Common.Views.ChartTab || {}));
});

View File

@ -444,27 +444,34 @@
.combo-chart-template {
.combo-template(62px);
top: -4px;
position: absolute;
.more-container & {
position: static;
}
.view .dataview, .dropdown-menu {
padding: 1px;
}
.dataview.inner {
padding: 1px 14px 1px 0px;
.rtl & {
padding: 1px 0px 1px 14px;
}
}
.dropdown-menu {
padding: 0px 0px 5px 0px;
margin-left: 2px;
.dataview {
.group-description {
padding: 3px 0 3px 10px;
.font-weight-bold();
.rtl & {
padding: 3px 10px 3px 0;
}
.dataview.inner {
padding: 1px 12px 1px 0px;
.rtl & {
padding: 1px 0px 1px 12px;
}
}
}

View File

@ -935,17 +935,16 @@ define([
this.toolbar.lockToolbar(Common.enumLock.cantAddImagePara, in_para && !can_add_image, {array: [toolbar.btnInsertTextArt]});
if (in_chart !== this._state.in_chart) {
toolbar.btnInsertChart.updateHint(in_chart ? toolbar.tipChangeChart : toolbar.tipInsertChart);
this._state.in_chart = in_chart;
}
toolbar.btnInsertChart.updateHint(
in_chart ? toolbar.tipChangeChart : toolbar.tipInsertChart
);
if (this._state.inchart !== in_chart) {
if ( !in_chart && this.toolbar.isTabActive('charttab') )
if (!in_chart && this.toolbar.isTabActive('charttab'))
this.toolbar.setTab('home');
this.toolbar.setVisible('charttab', !!in_chart);
if (in_chart && this._state.showChartTab)
this.toolbar.setTab('charttab');
this._state.inchart = in_chart;
this._state.in_chart = in_chart;
}
var need_disable = paragraph_locked || header_locked || in_equation || control_plain || rich_del_lock || plain_del_lock || content_locked || in_para && !can_add_image;

View File

@ -1313,6 +1313,7 @@
"Common.Views.ChartTab.menuCapEditLinks": "Edit links",
"Common.Views.ChartTab.menuCapOpen": "Open",
"Common.Controllers.ChartTab.menuCapOpen": "Open",
"Common.Controllers.ChartTab.textStyle": "Style",
"Common.Views.Charts3DDlg.txtXRotation": "X-rotation",
"Common.Views.Charts3DDlg.txtYRotation": "Y-rotation",
"Common.Views.Charts3DDlg.txtPerspective": "Perspective",

View File

@ -663,13 +663,13 @@ define([
}
}
if (this._state.inchart !== in_chart) {
if (this._state.in_chart !== in_chart) {
if ( !in_chart && this.toolbar.isTabActive('charttab') )
this.toolbar.setTab('home');
this.toolbar.setVisible('charttab', !!in_chart);
if (in_chart && this._state.showChartTab)
this.toolbar.setTab('charttab');
this._state.inchart = in_chart;
this._state.in_chart = in_chart;
}
if (this._state.prcontrolsdisable !== paragraph_locked) {

View File

@ -965,6 +965,7 @@
"Common.Views.ChartTab.menuCapEditLinks": "Edit links",
"Common.Views.ChartTab.menuCapOpen": "Open",
"Common.Controllers.ChartTab.menuCapOpen": "Open",
"Common.Controllers.ChartTab.textStyle": "Style",
"Common.Views.Charts3DDlg.txtXRotation": "X-rotation",
"Common.Views.Charts3DDlg.txtYRotation": "Y-rotation",
"Common.Views.Charts3DDlg.txtPerspective": "Perspective",

View File

@ -905,17 +905,16 @@ define([
}
if (in_chart !== this._state.in_chart) {
this.toolbar.btnInsertChart.updateHint(in_chart ? this.toolbar.tipChangeChart : this.toolbar.tipInsertChart);
this._state.in_chart = in_chart;
}
this.toolbar.btnInsertChart.updateHint(
in_chart ? this.toolbar.tipChangeChart : this.toolbar.tipInsertChart
);
if (this._state.inchart !== in_chart) {
if ( !in_chart && this.toolbar.isTabActive('charttab') )
if (!in_chart && this.toolbar.isTabActive('charttab'))
this.toolbar.setTab('home');
this.toolbar.setVisible('charttab', !!in_chart);
if (in_chart && this._state.showChartTab)
this.toolbar.setTab('charttab');
this._state.inchart = in_chart;
this._state.in_chart = in_chart;
}
this.toolbar.lockToolbar(Common.enumLock.noParagraphObject, !in_para, {array: [me.toolbar.btnLineSpace]});

View File

@ -1374,6 +1374,7 @@
"Common.Views.ChartTab.menuCapEditLinks": "Edit links",
"Common.Views.ChartTab.menuCapOpen": "Open",
"Common.Controllers.ChartTab.menuCapOpen": "Open",
"Common.Controllers.ChartTab.textStyle": "Style",
"Common.Views.Charts3DDlg.txtXRotation": "X-rotation",
"Common.Views.Charts3DDlg.txtYRotation": "Y-rotation",
"Common.Views.Charts3DDlg.txtPerspective": "Perspective",