From 8e39f28bb383b1c5eee3358d5ee67625000d5135 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Tue, 13 Aug 2019 15:31:33 +0300 Subject: [PATCH 01/11] [SSE] Fill in Cell Settings --- .../main/app/template/CellSettings.template | 68 +++- .../main/app/view/CellSettings.js | 330 +++++++++++++++++- 2 files changed, 389 insertions(+), 9 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/template/CellSettings.template b/apps/spreadsheeteditor/main/app/template/CellSettings.template index f02f4417d..a181f2874 100644 --- a/apps/spreadsheeteditor/main/app/template/CellSettings.template +++ b/apps/spreadsheeteditor/main/app/template/CellSettings.template @@ -1,4 +1,66 @@ + + + + + + + + + + + + - - -
+ +
+
+
+
+
+
+
+ +
+
+ +
+
+
+ +
+
+
+
+
+
+ +
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
@@ -38,12 +100,6 @@
- -
-
diff --git a/apps/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js index 4978cd450..b638c5bb1 100644 --- a/apps/spreadsheeteditor/main/app/view/CellSettings.js +++ b/apps/spreadsheeteditor/main/app/view/CellSettings.js @@ -71,16 +71,23 @@ define([ this._state = { BackColor: undefined, DisabledControls: true, - CellAngle: undefined + DisabledFillPanels: false, + CellAngle: undefined, + GradFillType: Asc.c_oAscFillGradType.GRAD_LINEAR }; this.lockedControls = []; this._locked = true; this.isEditCell = false; this.BorderType = 1; + this.fillControls = []; + this.render(); this.createDelayedControls(); + this.FillColorContainer = $('#cell-panel-color-fill'); + this.FillPatternContainer = $('#cell-panel-pattern-fill'); + this.FillGradientContainer = $('#cell-panel-gradient-fill'); }, onColorsBackSelect: function(picker, color) { @@ -155,6 +162,137 @@ define([ }, createDelayedControls: function() { + var me = this; + this._arrFillSrc = [ + {displayValue: this.textColor, value: Asc.c_oAscFill.FILL_TYPE_SOLID}, + {displayValue: this.textGradientFill, value: Asc.c_oAscFill.FILL_TYPE_GRAD}, + {displayValue: this.textPatternFill, value: Asc.c_oAscFill.FILL_TYPE_PATT}, + {displayValue: this.textNoFill, value: Asc.c_oAscFill.FILL_TYPE_NOFILL} + ]; + + this.cmbFillSrc = new Common.UI.ComboBox({ + el: $('#cell-combo-fill-src'), + cls: 'input-group-nr', + style: 'width: 100%;', + menuStyle: 'min-width: 100%;', + editable: false, + data: this._arrFillSrc + }); + this.cmbFillSrc.setValue(this._arrFillSrc[0].value); + this.fillControls.push(this.cmbFillSrc); + this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this)); + + this._arrGradType = [ + {displayValue: this.textLinear, value: Asc.c_oAscFillGradType.GRAD_LINEAR}, + {displayValue: this.textRadial, value: Asc.c_oAscFillGradType.GRAD_PATH} + ]; + + this.cmbGradType = new Common.UI.ComboBox({ + el: $('#cell-combo-grad-type'), + cls: 'input-group-nr', + menuStyle: 'min-width: 90px;', + editable: false, + data: this._arrGradType + }); + this.cmbGradType.setValue(this._arrGradType[0].value); + this.fillControls.push(this.cmbGradType); + this.cmbGradType.on('selected', _.bind(this.onGradTypeSelect, this)); + + 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('
') } + ] + }) + }); + this.btnDirection.on('render:after', function(btn) { + me.mnuDirectionPicker = new Common.UI.DataView({ + el: $('#id-cell-menu-direction'), + parentMenu: btn.menu, + restoreHeight: 174, + store: new Common.UI.DataViewStore(me._viewDataLinear), + itemTemplate: _.template('
') + }); + }); + this.btnDirection.render($('#cell-button-direction')); + this.fillControls.push(this.btnDirection); + this.mnuDirectionPicker.on('item:click', _.bind(this.onSelectGradient, this, this.btnDirection)); + + this.cmbPattern = new Common.UI.ComboDataView({ + itemWidth: 28, + itemHeight: 28, + menuMaxHeight: 300, + enableKeyEvents: true, + cls: 'combo-pattern' + }); + this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([ + '
', + '', + '
' + ].join('')); + this.cmbPattern.render($('#cell-combo-pattern')); + this.cmbPattern.openButton.menu.cmpEl.css({ + 'min-width': 178, + 'max-width': 178 + }); + this.cmbPattern.on('click', _.bind(this.onPatternSelect, this)); + this.cmbPattern.openButton.menu.on('show:after', function () { + me.cmbPattern.menuPicker.scroller.update({alwaysVisibleY: true}); + }); + this.fillControls.push(this.cmbPattern); + + var global_hatch_menu_map = [ + 0,1,3,2,4, + 53,5,6,7,8, + 9,10,11,12,13, + 14,15,16,17,18, + 19,20,22,23,24, + 25,27,28,29,30, + 31,32,33,34,35, + 36,37,38,39,40, + 41,42,43,44,45, + 46,49,50,51,52 + ]; + + this.patternViewData = []; + for (var i=0; i<13; i++) { + for (var j=0; j<4; j++) { + var num = i*4+j; + this.patternViewData[num] = {offsetx: j*28, offsety: i*28, type: global_hatch_menu_map[num]}; + } + } + this.patternViewData.splice(this.patternViewData.length-2, 2); + + for ( var i=0; i 0) { + this.cmbPattern.fillComboView(this.cmbPattern.menuPicker.store.at(0),true); + this.PatternFillType = this.patternViewData[0].type; + } + var _arrBorderPosition = [ [Asc.c_oAscBorderOptions.Left, 'btn-borders-small btn-position-left', 'cell-button-border-left', this.tipLeft], [Asc.c_oAscBorderOptions.InnerV,'btn-borders-small btn-position-inner-vert','cell-button-border-inner-vert', this.tipInnerVert], @@ -323,10 +461,91 @@ define([ }); this.colorsBack.on('select', _.bind(this.onColorsBackSelect, this)); this.btnBackColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor)); + this.fillControls.push(this.btnBackColor); + + this.btnGradColor1 = new Common.UI.ColorButton({ + style: "width:45px;", + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + }) + }); + this.btnGradColor1.render( $('#cell-grad-btn-color-1')); + this.btnGradColor1.setColor('000000'); + this.colorsGrad1 = new Common.UI.ThemeColorPalette({ + el: $('#cell-gradient-color1-menu'), + value: '000000' + }); + this.colorsGrad1.on('select', _.bind(this.onColorsGradientSelect, this)); + this.btnGradColor1.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsGrad1, this.btnGradColor1)); + this.fillControls.push(this.btnGradColor1); + + this.btnGradColor2 = new Common.UI.ColorButton({ + style: "width:45px;", + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + }) + }); + this.btnGradColor2.render( $('#cell-grad-btn-color-2')); + this.btnGradColor2.setColor('ffffff'); + this.colorsGrad2 = new Common.UI.ThemeColorPalette({ + el: $('#cell-gradient-color2-menu'), + value: 'ffffff' + }); + this.colorsGrad2.on('select', _.bind(this.onColorsGradientSelect, this)); + this.btnGradColor2.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsGrad2, this.btnGradColor2)); + this.fillControls.push(this.btnGradColor2); + + this.btnFGColor = new Common.UI.ColorButton({ + style: "width:45px;", + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + }) + }); + this.btnFGColor.render( $('#cell-foreground-color-btn')); + this.btnFGColor.setColor('000000'); + this.colorsFG = new Common.UI.ThemeColorPalette({ + el: $('#cell-foreground-color-menu'), + value: '000000' + }); + this.colorsFG.on('select', _.bind(this.onColorsFGSelect, this)); + this.btnFGColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsFG, this.btnFGColor)); + this.fillControls.push(this.btnFGColor); + + this.btnBGColor = new Common.UI.ColorButton({ + style: "width:45px;", + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + }) + }); + this.btnBGColor.render( $('#cell-background-color-btn')); + this.btnBGColor.setColor('ffffff'); + this.colorsBG = new Common.UI.ThemeColorPalette({ + el: $('#cell-background-color-menu'), + value: 'ffffff' + }); + this.colorsBG.on('select', _.bind(this.onColorsBGSelect, this)); + this.btnBGColor.menu.items[1].on('click', _.bind(this.addNewColor, this, this.colorsBG, this.btnBGColor)); + this.fillControls.push(this.btnBGColor); } this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); this.borderColor.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); this.btnBorderColor.setColor(this.borderColor.getColor()); + this.colorsGrad1.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); + this.colorsGrad2.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); + this.colorsFG.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); + this.colorsBG.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); }, onApiEditCell: function(state) { @@ -339,10 +558,20 @@ define([ this._locked = locked; }, + disableFillPanels: function(disable) { + if (this._state.DisabledFillPanels!==disable) { + this._state.DisabledFillPanels = disable; + _.each(this.fillControls, function(item) { + item.setDisabled(disable); + }); + } + }, + disableControls: function(disable) { if (this._initSettings) return; disable = disable || this.isEditCell; - + + this.disableFillPanels(disable); if (this._state.DisabledControls!==disable) { this._state.DisabledControls = disable; _.each(this.lockedControls, function(item) { @@ -351,6 +580,87 @@ define([ } }, + onFillSrcSelect: function(combo, record) { + this.ShowHideElem(record.value); + }, + + ShowHideElem: function(value) { + this.FillColorContainer.toggleClass('settings-hidden', value !== Asc.c_oAscFill.FILL_TYPE_SOLID); + this.FillPatternContainer.toggleClass('settings-hidden', value !== Asc.c_oAscFill.FILL_TYPE_PATT); + this.FillGradientContainer.toggleClass('settings-hidden', value !== Asc.c_oAscFill.FILL_TYPE_GRAD); + }, + + onGradTypeSelect: function(combo, record) { + this.GradFillType = record.value; + + if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { + 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(''); + } else if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) { + 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(''); + } + + Common.NotificationCenter.trigger('edit:complete', 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); + (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0; + + Common.NotificationCenter.trigger('edit:complete', this); + }, + + onColorsGradientSelect: function(picker, color) { + var pickerId = $(picker)[0].el.id; + if (pickerId === "cell-gradient-color1-menu") { + this.btnGradColor1.setColor(color); + } else if (pickerId === "cell-gradient-color2-menu") { + this.btnGradColor2.setColor(color); + } + }, + + onPatternSelect: function() { + + }, + + onColorsFGSelect: function(picker, color) { + this.btnFGColor.setColor(color); + }, + + onColorsBGSelect: function(picker, color) { + this.btnBGColor.setColor(color); + }, + textBorders: 'Border\'s Style', textBorderColor: 'Color', textBackColor: 'Background color', @@ -369,7 +679,21 @@ define([ tipDiagU: 'Set Diagonal Up Border', tipDiagD: 'Set Diagonal Down Border', textOrientation: 'Text Orientation', - textAngle: 'Angle' + textAngle: 'Angle', + textFill: 'Fill', + textNoFill: 'No Fill', + textGradientFill: 'Gradient Fill', + textPatternFill: 'Pattern', + textColor: 'Color Fill', + textStyle: 'Style', + textDirection: 'Direction', + textLinear: 'Linear', + textRadial: 'Radial', + textColor1: 'Color 1', + textColor2: 'Color 2', + textPattern: 'Pattern', + textForeground: 'Foreground color', + textBackground: 'Background color' }, SSE.Views.CellSettings || {})); }); \ No newline at end of file From d5e013176e12fb14a41ba4f89f53b4db429c3acf Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 13 Aug 2019 16:31:24 +0300 Subject: [PATCH 02/11] [SSE] Change patterns for cell --- .../main/app/view/CellSettings.js | 25 ++++++++++--------- 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js index b638c5bb1..825771218 100644 --- a/apps/spreadsheeteditor/main/app/view/CellSettings.js +++ b/apps/spreadsheeteditor/main/app/view/CellSettings.js @@ -263,26 +263,27 @@ define([ this.fillControls.push(this.cmbPattern); var global_hatch_menu_map = [ - 0,1,3,2,4, - 53,5,6,7,8, - 9,10,11,12,13, - 14,15,16,17,18, - 19,20,22,23,24, - 25,27,28,29,30, - 31,32,33,34,35, - 36,37,38,39,40, - 41,42,43,44,45, - 46,49,50,51,52 + 0,-1,-1,-1,-1, + -1,-1,-1,-1,8, + 9,10,11,-1,-1, + -1,-1,-1,-1,-1, + -1,20,22,23,-1, + -1,27,28,29,30, + -1,-1,33,-1,35, + -1,-1,-1,-1,-1, + 41,-1,43,-1,-1, + 46,-1,-1,-1,-1 ]; this.patternViewData = []; + var idx = 0; for (var i=0; i<13; i++) { for (var j=0; j<4; j++) { var num = i*4+j; - this.patternViewData[num] = {offsetx: j*28, offsety: i*28, type: global_hatch_menu_map[num]}; + if (global_hatch_menu_map[num]>-1) + this.patternViewData[idx++] = {offsetx: j*28, offsety: i*28, type: global_hatch_menu_map[num]}; } } - this.patternViewData.splice(this.patternViewData.length-2, 2); for ( var i=0; i Date: Mon, 19 Aug 2019 16:22:02 +0300 Subject: [PATCH 03/11] [SSE] Fill in Cell Settings --- .../main/app/view/CellSettings.js | 403 ++++++++++++++++-- 1 file changed, 365 insertions(+), 38 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js index 825771218..013d4ff32 100644 --- a/apps/spreadsheeteditor/main/app/view/CellSettings.js +++ b/apps/spreadsheeteditor/main/app/view/CellSettings.js @@ -67,18 +67,27 @@ define([ initialize: function () { this._initSettings = true; + this._noApply = true; this._state = { - BackColor: undefined, DisabledControls: true, DisabledFillPanels: false, CellAngle: undefined, - GradFillType: Asc.c_oAscFillGradType.GRAD_LINEAR + GradFillType: Asc.c_oAscFillGradType.GRAD_LINEAR, + CellColor: null, + FillType: Asc.c_oAscFill.FILL_TYPE_SOLID, + FGColor: '000000', + BGColor: 'ffffff', + GradColor1: null, + GradColor2: null }; this.lockedControls = []; this._locked = true; this.isEditCell = false; this.BorderType = 1; + this.GradLinearDirectionType = 0; + this.GradRadialDirectionIdx = 0; + this.GradColors = ['000000','ffffff']; this.fillControls = []; @@ -392,46 +401,246 @@ define([ if (props ) { - var color = props.asc_getFill().asc_getColor(), - clr; - if (color) { - if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) { - clr = {color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value() }; - } else { - clr = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()); - } - } else { - clr = 'transparent'; - } - - var type1 = typeof(clr); - var type2 = typeof(this._state.BackColor); - if ( (type1 !== type2) || (type1=='object' && - (clr.effectValue!==this._state.BackColor.effectValue || this._state.BackColor.color.indexOf(clr.color)<0)) || - (type1!='object' && this._state.BackColor!==undefined && this._state.BackColor.indexOf(clr)<0 )) { - - this.btnBackColor.setColor(clr); - if (_.isObject(clr)) { - var isselected = false; - for (var i = 0; i < 10; i++) { - if (Common.Utils.ThemeColor.ThemeValues[i] == clr.effectValue) { - this.colorsBack.select(clr,true); - isselected = true; - break; - } - } - if (!isselected) this.colorsBack.clearSelection(); - } else { - this.colorsBack.select(clr, true); - } - this._state.BackColor = clr; - } + this._noApply = true; var value = props.asc_getAngle(); if ( Math.abs(this._state.CellAngle-value)>0.1 || (this._state.CellAngle===undefined)&&(this._state.CellAngle!==value)) { this.spnAngle.setValue((value !== null) ? value : '', true); this._state.CellAngle=value; } + var fill = props.asc_getFill2(), + pattern = fill.asc_getPatternFill(), + gradient = fill.asc_getGradientFill(); + if (pattern === null && gradient === null) { + this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_NOFILL; + this.CellColor = {Value: 0, Color: 'transparent'}; + this.FGColor = {Value: 1, Color: '000000'}; + this.BGColor = {Value: 1, Color: 'ffffff'}; + } else if (pattern !== null) { + if(pattern.asc_getType() === Asc.c_oAscPatternType.Solid) { + var color = pattern.asc_getFgColor(); + if (color.getType() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) { + this.CellColor = {Value: 1, Color: {color: Common.Utils.ThemeColor.getHexColor(color.getR(), color.getG(), color.getB()), effectValue: color.get_value() }}; + } else { + this.CellColor = {Value: 1, Color: Common.Utils.ThemeColor.getHexColor(color.getR(), color.getG(), color.getB())}; + } + this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_SOLID; + this.FGColor = this.GradColor1 = {Value: 1, Color: Common.Utils.ThemeColor.colorValue2EffectId(this.CellColor.Color)}; + this.BGColor = this.GradColor2 = {Value: 1, Color: 'ffffff'}; + } else { + this.PatternFillType = pattern.asc_getType(); + if (this._state.PatternFillType !== this.PatternFillType) { + this.cmbPattern.suspendEvents(); + var rec = this.cmbPattern.menuPicker.store.findWhere({ + type: this.PatternFillType + }); + this.cmbPattern.menuPicker.selectRecord(rec); + this.cmbPattern.resumeEvents(); + this._state.PatternFillType = this.PatternFillType; + } + var color = pattern.asc_getFgColor(); + if (color) { + if (color.getType() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) { + this.FGColor = {Value: 1, Color: {color: Common.Utils.ThemeColor.getHexColor(color.getR(), color.getG(), color.getB()), effectValue: color.asc_getValue() }}; + } else { + this.FGColor = {Value: 1, Color: Common.Utils.ThemeColor.getHexColor(color.getR(), color.getG(), color.getB())}; + } + } else + this.FGColor = {Value: 1, Color: '000000'}; + + color = pattern.asc_getBgColor(); + if (color) { + if (color.getType() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) { + this.BGColor = {Value: 1, Color: {color: Common.Utils.ThemeColor.getHexColor(color.getR(), color.getG(), color.getB()), effectValue: color.asc_getValue() }}; + } else { + this.BGColor = {Value: 1, Color: Common.Utils.ThemeColor.getHexColor(color.getR(), color.getG(), color.getB())}; + } + } else + this.BGColor = {Value: 1, Color: 'ffffff'}; + this.CellColor = {Value: 1, Color: Common.Utils.ThemeColor.colorValue2EffectId(this.FGColor.Color)}; + this.GradColor1 = this.FGColor; + this.GradColor2 = {Value: 1, Color: 'ffffff'}; + this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_PATT; + } + } else if (gradient !== null) { + var gradFillType = gradient.asc_getType(); + if (this._state.GradFillType !== gradFillType || this.GradFillType !== gradFillType) { + this.GradFillType = gradFillType; + rec = undefined; + if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR || this.GradFillType == Asc.c_oAscFillGradType.GRAD_PATH) { + 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; + } + if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { + var value = gradient.asc_getDegree(); + 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 gradientColors = []; + this.GradColors = []; + //gradientColors = gradient.asc_getGradientColors(); + for(var color in gradientColors) { + var clr = color.color, + itemColor; + if (clr.getType() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) { + itemColor = {Value: 1, Color: {color: Common.Utils.ThemeColor.getHexColor(clr.getR(), clr.getG(), clr.getB()), effectValue: clr.asc_getValue() }}; + } else { + itemColor = {Value: 1, Color: Common.Utils.ThemeColor.getHexColor(clr.getR(), clr.getG(), clr.getB())}; + } + this.GradColors.push(itemColor); + }*/ + + + this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD; + this.FGColor = {Value: 1, Color: 'ffffff'}; // this.GradColors[0] + this.BGColor = {Value: 1, Color: 'ffffff'}; + this.CellColor = {Value: 1, Color: 'ffffff'}; // this.GradColors[0] + } + + if ( this._state.FillType !== this.OriginalFillType ) { + this.cmbFillSrc.setValue((this.OriginalFillType === null) ? '' : this.OriginalFillType); + this._state.FillType = this.OriginalFillType; + this.ShowHideElem(this.OriginalFillType); + } + + // Color Back + + var type1 = typeof(this.CellColor.Color), + type2 = typeof(this._state.CellColor); + if ( (type1 !== type2) || (type1=='object' && + (this.CellColor.Color.effectValue!==this._state.CellColor.effectValue || this._state.CellColor.color.indexOf(this.CellColor.Color)<0)) || + (type1!='object' && this._state.CellColor!==undefined && this._state.CellColor.indexOf(this.CellColor.Color)<0 )) { + + this.btnBackColor.setColor(this.CellColor.Color); + if (_.isObject(this.CellColor.Color)) { + var isselected = false; + for (var i = 0; i < 10; i++) { + if (Common.Utils.ThemeColor.ThemeValues[i] == this.CellColor.Color.effectValue) { + this.colorsBack.select(this.CellColor.Color,true); + isselected = true; + break; + } + } + if (!isselected) this.colorsBack.clearSelection(); + } else { + this.colorsBack.select(this.CellColor.Color, true); + } + this._state.CellColor = this.CellColor.Color; + } + + // Pattern colors + type1 = typeof(this.FGColor.Color); + type2 = typeof(this._state.FGColor); + + if ( (type1 !== type2) || (type1=='object' && + (this.FGColor.Color.effectValue!==this._state.FGColorColor.effectValue || this._state.FGColor.color.indexOf(this.FGColor.Color.color)<0)) || + (type1!='object' && this._state.FGColor.indexOf(this.FGColor.Color)<0 )) { + + this.btnFGColor.setColor(this.FGColor.Color); + if ( typeof(this.FGColor.Color) == 'object' ) { + var isselected = false; + for (var i=0; i<10; i++) { + if ( Common.Utils.ThemeColor.ThemeValues[i] == this.FGColor.Color.effectValue ) { + this.colorsFG.select(this.FGColor.Color,true); + isselected = true; + break; + } + } + if (!isselected) this.colorsFG.clearSelection(); + } else + this.colorsFG.select(this.FGColor.Color,true); + + this._state.FGColor = this.FGColor.Color; + } + + type1 = typeof(this.BGColor.Color); + type2 = typeof(this._state.BGColor); + + if ( (type1 !== type2) || (type1=='object' && + (this.BGColor.Color.effectValue!==this._state.BGColor.effectValue || this._state.BGColor.color.indexOf(this.BGColor.Color.color)<0)) || + (type1!='object' && this._state.BGColor.indexOf(this.BGColor.Color)<0 )) { + + this.btnBGColor.setColor(this.BGColor.Color); + if ( typeof(this.BGColor.Color) == 'object' ) { + var isselected = false; + for (var i=0; i<10; i++) { + if ( Common.Utils.ThemeColor.ThemeValues[i] == this.BGColor.Color.effectValue ) { + this.colorsBG.select(this.BGColor.Color,true); + isselected = true; + break; + } + } + if (!isselected) this.colorsBG.clearSelection(); + } else + this.colorsBG.select(this.BGColor.Color,true); + + this._state.BGColor = this.BGColor.Color; + } + + // Gradient colors + /*type1 = typeof(this.GradColors[0].Color); + type2 = typeof(this._state.GradColor1); + + if ( (type1 !== type2) || (type1=='object' && + (this.GradColors[0].Color.effectValue!==this._state.GradColor1.effectValue || this._state.GradColor1.color.indexOf(this.GradColors[0].Color.color)<0)) || + (type1!='object' && this._state.GradColor1.indexOf(this.GradColors[0].Color)<0 )) { + + this.btnGradColor1.setColor(this.GradColors[0].Color); + if ( typeof(this.GradColors[0].Color) == 'object' ) { + var isselected = false; + for (var i=0; i<10; i++) { + if ( Common.Utils.ThemeColor.ThemeValues[i] == this.GradColors[0].Color.effectValue ) { + this.colorsGrad1.select(this.GradColors[0].Color,true); + isselected = true; + break; + } + } + if (!isselected) this.colorsGrad1.clearSelection(); + } else + this.colorsGrad1.select(this.GradColors[0].Color,true); + + this._state.GradColor1 = this.GradColors[0].Color; + } + + type1 = typeof(this.GradColors[1].Color); + type2 = typeof(this._state.GradColor2); + + if ( (type1 !== type2) || (type1=='object' && + (this.GradColors[1].Color.effectValue!==this._state.GradColor2.effectValue || this._state.GradColor2.color.indexOf(this.GradColors[1].Color.color)<0)) || + (type1!='object' && this._state.GradColor2.indexOf(this.GradColors[1].Color)<0 )) { + + this.btnGradColor1.setColor(this.GradColors[1].Color); + if ( typeof(this.GradColors[1].Color) == 'object' ) { + var isselected = false; + for (var i=0; i<10; i++) { + if ( Common.Utils.ThemeColor.ThemeValues[i] == this.GradColors[1].Color.effectValue ) { + this.colorsGrad2.select(this.GradColors[1].Color,true); + isselected = true; + break; + } + } + if (!isselected) this.colorsGrad2.clearSelection(); + } else + this.colorsGrad2.select(this.GradColors[1].Color,true); + + this._state.GradColor2 = this.GradColors[1].Color; + }*/ + + this._noApply = false; } }, @@ -583,6 +792,52 @@ define([ onFillSrcSelect: function(combo, record) { this.ShowHideElem(record.value); + switch (record.value){ + case Asc.c_oAscFill.FILL_TYPE_SOLID: + this._state.FillType = Asc.c_oAscFill.FILL_TYPE_SOLID; + if (!this._noApply) { + var pattern = new Asc.asc_CPatternFill(); + //pattern.asc_putColor(Common.Utils.ThemeColor.getRgbColor((this.CellColor.Color=='transparent') ? {color: '4f81bd', effectId: 24} : this.CellColor.Color)); + //this.propsFill.asc_putPatternFill(pattern); + //this.api.asc_setGraphicObjectProps(this.propsFill); + } + break; + case Asc.c_oAscFill.FILL_TYPE_GRAD: + this._state.FillType = Asc.c_oAscFill.FILL_TYPE_GRAD; + if (!this._noApply) { + var gradient = new Asc.asc_CGradientFill(); + //TO DO + } + break; + case Asc.c_oAscFill.FILL_TYPE_PATT: + this._state.FillType = Asc.c_oAscFill.FILL_TYPE_PATT; + if (!this._noApply) { + var pattern = new Asc.asc_CPatternFill(); + + var fHexColor = Common.Utils.ThemeColor.getRgbColor(this.FGColor.Color).get_color().get_hex(); + var bHexColor = Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color).get_color().get_hex(); + + if (bHexColor === 'ffffff' && fHexColor === 'ffffff') { + fHexColor = {color: '4f81bd', effectId: 24}; // color accent1 + } else { + fHexColor = this.FGColor.Color; + } + //pattern.asc_putColorFg(Common.Utils.ThemeColor.getRgbColor(fHexColor)); + //pattern.asc_putColorBg(Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color)); + //this.propsFill.asc_putPatternFill(pattern); + //this.api.asc_setGraphicObjectProps(this.propsFill); + } + break; + case Asc.c_oAscFill.FILL_TYPE_NOFILL: + this._state.FillType = Asc.c_oAscFill.FILL_TYPE_NOFILL; + if (!this._noApply) { + //this.propsFill.asc_putPatternFill(null); + //this.propsFill.asc_putGradientFill(null); + //this.api.asc_setGraphicObjectProps(this.propsFill); + } + break; + } + Common.NotificationCenter.trigger('edit:complete', this); }, ShowHideElem: function(value) { @@ -615,6 +870,16 @@ define([ this.btnDirection.setIconCls(''); } + if (this.api && !this._noApply) { + var gradient = new Asc.asc_CGradientFill(); + if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { + //gradient.asc_putDegree(this.GradLinearDirectionType); + //gradient.asc_putLinearScale(true); + } + //this.propsFill.asc_putGradientFill(gradient); + //this.api.asc_setGraphicObjectProps(this.propsFill); + } + Common.NotificationCenter.trigger('edit:complete', this); }, @@ -638,6 +903,17 @@ define([ this.btnDirection.setIconCls('item-gradient ' + rawData.iconcls); (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0; + if (this.api) { + if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { + var gradient = new Asc.asc_CGradientFill(); + //gradient.asc_putDegree(rawData.type); + //gradient.asc_putLinearScale(true); + + //this.propsFill.asc_putGradientFill(gradient); + //this.api.asc_setGraphicObjectProps(this.propsFill); + } + } + Common.NotificationCenter.trigger('edit:complete', this); }, @@ -645,21 +921,72 @@ define([ var pickerId = $(picker)[0].el.id; if (pickerId === "cell-gradient-color1-menu") { this.btnGradColor1.setColor(color); + this.GradColors[0] = color; } else if (pickerId === "cell-gradient-color2-menu") { this.btnGradColor2.setColor(color); + this.GradColors[1] = color; } + + if (this.api && !this._noApply) { + var gradient = new Asc.asc_CGradientFill(); + var arr = []; + this.GradColors.forEach(function(item){ + arr.push(Common.Utils.ThemeColor.getRgbColor(item)); + }); + //gradient.asc_putColors(arr); + //this.propsFill.asc_putGradientFill(gradient); + //this.api.asc_setGraphicObjectProps(this.propsFill); + } + Common.NotificationCenter.trigger('edit:complete', this); }, - onPatternSelect: function() { - + onPatternSelect: function(combo, record) { + if (this.api && !this._noApply) { + this.PatternFillType = record.get('type'); + var pattern = new Asc.asc_CPatternFill(); + //pattern.asc_putPatternType(this.PatternFillType); + if (this.OriginalFillType !== Asc.c_oAscFill.FILL_TYPE_PATT) { + //fill.asc_getFill().asc_putColorFg(Common.Utils.ThemeColor.getRgbColor(this.FGColor.Color)); + //fill.asc_getFill().asc_putColorBg(Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color)); + } + //this.propsFill.asc_putPatternFill(pattern); + //this.api.asc_setGraphicObjectProps(this.propsFill); + } + Common.NotificationCenter.trigger('edit:complete', this); }, onColorsFGSelect: function(picker, color) { this.btnFGColor.setColor(color); + this.FGColor = {Value: 1, Color: color}; + if (this.api && !this._noApply) { + var pattern = new Asc.asc_CPatternFill(); + //pattern.asc_putType(Asc.c_oAscFill.FILL_TYPE_PATT); + //pattern.asc_putColorFg(Common.Utils.ThemeColor.getRgbColor(this.FGColor.Color)); + if (this.OriginalFillType !== Asc.c_oAscFill.FILL_TYPE_PATT) { + //pattern.asc_putPatternType(this.PatternFillType); + //pattern.asc_putColorBg(Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color)); + } + //this.propsFill.asc_putPatternFill(pattern); + //this.api.asc_setGraphicObjectProps(this.propsFill); + } + Common.NotificationCenter.trigger('edit:complete', this); }, onColorsBGSelect: function(picker, color) { this.btnBGColor.setColor(color); + this.BGColor = {Value: 1, Color: color}; + if (this.api && !this._noApply) { + var pattern = new Asc.asc_CPatternFill(); + //pattern.asc_putType(Asc.c_oAscFill.FILL_TYPE_PATT); + if (this.OriginalFillType !== Asc.c_oAscFill.FILL_TYPE_PATT) { + //pattern.asc_putPatternType(this.PatternFillType); + //pattern.asc_putColorFg(Common.Utils.ThemeColor.getRgbColor(this.FGColor.Color)); + } + //pattern.asc_putColorBg(Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color)); + //this.propsFill.asc_putPatternFill(pattern); + //this.api.asc_setGraphicObjectProps(this.propsFill); + } + Common.NotificationCenter.trigger('edit:complete', this); }, textBorders: 'Border\'s Style', From 961ff8d2fc0dccda82f8b59b679f80b3b8e27f22 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Tue, 20 Aug 2019 12:55:55 +0300 Subject: [PATCH 04/11] [SSE] Cell fill (gradient colors) --- .../main/app/view/CellSettings.js | 83 +++++++++++-------- 1 file changed, 48 insertions(+), 35 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js index 013d4ff32..122f5afb1 100644 --- a/apps/spreadsheeteditor/main/app/view/CellSettings.js +++ b/apps/spreadsheeteditor/main/app/view/CellSettings.js @@ -87,7 +87,7 @@ define([ this.BorderType = 1; this.GradLinearDirectionType = 0; this.GradRadialDirectionIdx = 0; - this.GradColors = ['000000','ffffff']; + this.GradColors = []; this.fillControls = []; @@ -416,6 +416,8 @@ define([ this.CellColor = {Value: 0, Color: 'transparent'}; this.FGColor = {Value: 1, Color: '000000'}; this.BGColor = {Value: 1, Color: 'ffffff'}; + this.GradColors[0] = {Value: 1, Color: '000000', Position: 0}; + this.GradColors[1] = {Value: 1, Color: 'ffffff', Position: 1}; } else if (pattern !== null) { if(pattern.asc_getType() === Asc.c_oAscPatternType.Solid) { var color = pattern.asc_getFgColor(); @@ -425,8 +427,10 @@ define([ this.CellColor = {Value: 1, Color: Common.Utils.ThemeColor.getHexColor(color.getR(), color.getG(), color.getB())}; } this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_SOLID; - this.FGColor = this.GradColor1 = {Value: 1, Color: Common.Utils.ThemeColor.colorValue2EffectId(this.CellColor.Color)}; - this.BGColor = this.GradColor2 = {Value: 1, Color: 'ffffff'}; + this.FGColor = {Value: 1, Color: Common.Utils.ThemeColor.colorValue2EffectId(this.CellColor.Color)}; + this.BGColor = {Value: 1, Color: 'ffffff'}; + this.GradColors[0] = {Value: 1, Color: Common.Utils.ThemeColor.colorValue2EffectId(this.CellColor.Color), Position: 0}; + this.GradColors[1] = {Value: 1, Color: 'ffffff', Position: 1}; } else { this.PatternFillType = pattern.asc_getType(); if (this._state.PatternFillType !== this.PatternFillType) { @@ -458,8 +462,8 @@ define([ } else this.BGColor = {Value: 1, Color: 'ffffff'}; this.CellColor = {Value: 1, Color: Common.Utils.ThemeColor.colorValue2EffectId(this.FGColor.Color)}; - this.GradColor1 = this.FGColor; - this.GradColor2 = {Value: 1, Color: 'ffffff'}; + this.GradColors[0] = {Value: 1, Color: Common.Utils.ThemeColor.colorValue2EffectId(this.FGColor.Color), Position: 0}; + this.GradColors[1] = {Value: 1, Color: 'ffffff', Position: 1}; this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_PATT; } } else if (gradient !== null) { @@ -490,25 +494,26 @@ define([ } } - /* var gradientColors = []; + var gradientStops; this.GradColors = []; - //gradientColors = gradient.asc_getGradientColors(); - for(var color in gradientColors) { - var clr = color.color, + gradientStops = gradient.asc_getGradientStops(); + for(var color of gradientStops) { + var clr = color.asc_getColor(), + position = color.asc_getPosition(), itemColor; if (clr.getType() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) { - itemColor = {Value: 1, Color: {color: Common.Utils.ThemeColor.getHexColor(clr.getR(), clr.getG(), clr.getB()), effectValue: clr.asc_getValue() }}; + itemColor = {Value: 1, Color: {color: Common.Utils.ThemeColor.getHexColor(clr.getR(), clr.getG(), clr.getB()), effectValue: clr.asc_getValue() }, Position: position}; } else { - itemColor = {Value: 1, Color: Common.Utils.ThemeColor.getHexColor(clr.getR(), clr.getG(), clr.getB())}; + itemColor = {Value: 1, Color: Common.Utils.ThemeColor.getHexColor(clr.getR(), clr.getG(), clr.getB()), Position: position}; } this.GradColors.push(itemColor); - }*/ - - + } + this.GradColors = _.sortBy(this.GradColors, 'Position'); + this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD; - this.FGColor = {Value: 1, Color: 'ffffff'}; // this.GradColors[0] + this.FGColor = {Value: 1, Color: Common.Utils.ThemeColor.colorValue2EffectId(this.GradColors[0].Color)}; this.BGColor = {Value: 1, Color: 'ffffff'}; - this.CellColor = {Value: 1, Color: 'ffffff'}; // this.GradColors[0] + this.CellColor = {Value: 1, Color: Common.Utils.ThemeColor.colorValue2EffectId(this.GradColors[0].Color)}; } if ( this._state.FillType !== this.OriginalFillType ) { @@ -592,53 +597,61 @@ define([ } // Gradient colors - /*type1 = typeof(this.GradColors[0].Color); + var gradColor1 = this.GradColors[0]; + if (!gradColor1) { + gradColor1 = {Value: 1, Color: '000000'}; + } + type1 = typeof(gradColor1.Color); type2 = typeof(this._state.GradColor1); if ( (type1 !== type2) || (type1=='object' && - (this.GradColors[0].Color.effectValue!==this._state.GradColor1.effectValue || this._state.GradColor1.color.indexOf(this.GradColors[0].Color.color)<0)) || - (type1!='object' && this._state.GradColor1.indexOf(this.GradColors[0].Color)<0 )) { + (gradColor1.Color.effectValue!==this._state.GradColor1.effectValue || this._state.GradColor1.color.indexOf(gradColor1.Color.color)<0)) || + (type1!='object' && this._state.GradColor1.indexOf(gradColor1.Color)<0 )) { - this.btnGradColor1.setColor(this.GradColors[0].Color); - if ( typeof(this.GradColors[0].Color) == 'object' ) { + this.btnGradColor1.setColor(gradColor1.Color); + if ( typeof(gradColor1.Color) == 'object' ) { var isselected = false; for (var i=0; i<10; i++) { - if ( Common.Utils.ThemeColor.ThemeValues[i] == this.GradColors[0].Color.effectValue ) { - this.colorsGrad1.select(this.GradColors[0].Color,true); + if ( Common.Utils.ThemeColor.ThemeValues[i] == gradColor1.Color.effectValue ) { + this.colorsGrad1.select(gradColor1.Color,true); isselected = true; break; } } if (!isselected) this.colorsGrad1.clearSelection(); } else - this.colorsGrad1.select(this.GradColors[0].Color,true); + this.colorsGrad1.select(gradColor1.Color,true); - this._state.GradColor1 = this.GradColors[0].Color; + this._state.GradColor1 = gradColor1.Color; } - type1 = typeof(this.GradColors[1].Color); + var gradColor2 = this.GradColors[1]; + if (!gradColor2) { + gradColor2 = {Value: 1, Color: 'ffffff'}; + } + type1 = typeof(gradColor2.Color); type2 = typeof(this._state.GradColor2); if ( (type1 !== type2) || (type1=='object' && - (this.GradColors[1].Color.effectValue!==this._state.GradColor2.effectValue || this._state.GradColor2.color.indexOf(this.GradColors[1].Color.color)<0)) || - (type1!='object' && this._state.GradColor2.indexOf(this.GradColors[1].Color)<0 )) { + (gradColor2.Color.effectValue!==this._state.GradColor2.effectValue || this._state.GradColor2.color.indexOf(gradColor2.Color.color)<0)) || + (type1!='object' && this._state.GradColor2.indexOf(gradColor2.Color)<0 )) { - this.btnGradColor1.setColor(this.GradColors[1].Color); - if ( typeof(this.GradColors[1].Color) == 'object' ) { + this.btnGradColor2.setColor(gradColor2.Color); + if ( typeof(gradColor2.Color) == 'object' ) { var isselected = false; for (var i=0; i<10; i++) { - if ( Common.Utils.ThemeColor.ThemeValues[i] == this.GradColors[1].Color.effectValue ) { - this.colorsGrad2.select(this.GradColors[1].Color,true); + if ( Common.Utils.ThemeColor.ThemeValues[i] == gradColor2.Color.effectValue ) { + this.colorsGrad2.select(gradColor2.Color,true); isselected = true; break; } } if (!isselected) this.colorsGrad2.clearSelection(); } else - this.colorsGrad2.select(this.GradColors[1].Color,true); + this.colorsGrad2.select(gradColor2.Color,true); - this._state.GradColor2 = this.GradColors[1].Color; - }*/ + this._state.GradColor2 = gradColor2.Color; + } this._noApply = false; } From 3ab0f47dda4f41bffcdb6056082e4ecddc3054a5 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 21 Aug 2019 12:07:05 +0300 Subject: [PATCH 05/11] [SSE] Cell settings: fix pattern id --- apps/spreadsheeteditor/main/app/view/CellSettings.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js index 122f5afb1..356c47c4f 100644 --- a/apps/spreadsheeteditor/main/app/view/CellSettings.js +++ b/apps/spreadsheeteditor/main/app/view/CellSettings.js @@ -272,10 +272,10 @@ define([ this.fillControls.push(this.cmbPattern); var global_hatch_menu_map = [ - 0,-1,-1,-1,-1, + -1,-1,-1,-1,-1, -1,-1,-1,-1,8, 9,10,11,-1,-1, - -1,-1,-1,-1,-1, + -1,21,-1,-1,-1, -1,20,22,23,-1, -1,27,28,29,30, -1,-1,33,-1,35, From 582871f7f8c599ed4695d4f16ecc54119372f49e Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Wed, 21 Aug 2019 14:51:31 +0300 Subject: [PATCH 06/11] [SSE] Fix Cell fill --- apps/spreadsheeteditor/main/app/view/CellSettings.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js index 356c47c4f..83590234f 100644 --- a/apps/spreadsheeteditor/main/app/view/CellSettings.js +++ b/apps/spreadsheeteditor/main/app/view/CellSettings.js @@ -394,6 +394,7 @@ define([ }, ChangeSettings: function(props) { + var me = this; if (this._initSettings) this.createDelayedElements(); @@ -497,7 +498,7 @@ define([ var gradientStops; this.GradColors = []; gradientStops = gradient.asc_getGradientStops(); - for(var color of gradientStops) { + gradientStops.forEach(function (color) { var clr = color.asc_getColor(), position = color.asc_getPosition(), itemColor; @@ -506,8 +507,8 @@ define([ } else { itemColor = {Value: 1, Color: Common.Utils.ThemeColor.getHexColor(clr.getR(), clr.getG(), clr.getB()), Position: position}; } - this.GradColors.push(itemColor); - } + me.GradColors.push(itemColor); + }); this.GradColors = _.sortBy(this.GradColors, 'Position'); this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD; From 36b23cc3653b71b5cae91d0defa60b95fe0917cc Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Thu, 5 Sep 2019 15:41:47 +0300 Subject: [PATCH 07/11] [SSE] Cell fill --- .../main/app/view/CellSettings.js | 23 +++++++++---------- 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js index 83590234f..e6d6b706c 100644 --- a/apps/spreadsheeteditor/main/app/view/CellSettings.js +++ b/apps/spreadsheeteditor/main/app/view/CellSettings.js @@ -887,9 +887,9 @@ define([ if (this.api && !this._noApply) { var gradient = new Asc.asc_CGradientFill(); if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { - //gradient.asc_putDegree(this.GradLinearDirectionType); - //gradient.asc_putLinearScale(true); + gradient.asc_setDegree(this.GradLinearDirectionType); } + gradient.asc_setType(this.GradFillType); //this.propsFill.asc_putGradientFill(gradient); //this.api.asc_setGraphicObjectProps(this.propsFill); } @@ -920,8 +920,7 @@ define([ if (this.api) { if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { var gradient = new Asc.asc_CGradientFill(); - //gradient.asc_putDegree(rawData.type); - //gradient.asc_putLinearScale(true); + gradient.asc_setDegree(rawData.type); //this.propsFill.asc_putGradientFill(gradient); //this.api.asc_setGraphicObjectProps(this.propsFill); @@ -935,17 +934,17 @@ define([ var pickerId = $(picker)[0].el.id; if (pickerId === "cell-gradient-color1-menu") { this.btnGradColor1.setColor(color); - this.GradColors[0] = color; + this.GradColors[0].Color = color; } else if (pickerId === "cell-gradient-color2-menu") { this.btnGradColor2.setColor(color); - this.GradColors[1] = color; + this.GradColors[1].Color = color; } if (this.api && !this._noApply) { var gradient = new Asc.asc_CGradientFill(); var arr = []; this.GradColors.forEach(function(item){ - arr.push(Common.Utils.ThemeColor.getRgbColor(item)); + arr.push(Common.Utils.ThemeColor.getRgbColor(item.Color)); }); //gradient.asc_putColors(arr); //this.propsFill.asc_putGradientFill(gradient); @@ -958,7 +957,7 @@ define([ if (this.api && !this._noApply) { this.PatternFillType = record.get('type'); var pattern = new Asc.asc_CPatternFill(); - //pattern.asc_putPatternType(this.PatternFillType); + pattern.asc_setType(this.PatternFillType); if (this.OriginalFillType !== Asc.c_oAscFill.FILL_TYPE_PATT) { //fill.asc_getFill().asc_putColorFg(Common.Utils.ThemeColor.getRgbColor(this.FGColor.Color)); //fill.asc_getFill().asc_putColorBg(Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color)); @@ -974,10 +973,10 @@ define([ this.FGColor = {Value: 1, Color: color}; if (this.api && !this._noApply) { var pattern = new Asc.asc_CPatternFill(); - //pattern.asc_putType(Asc.c_oAscFill.FILL_TYPE_PATT); + pattern.asc_setType(Asc.c_oAscFill.FILL_TYPE_PATT); //pattern.asc_putColorFg(Common.Utils.ThemeColor.getRgbColor(this.FGColor.Color)); if (this.OriginalFillType !== Asc.c_oAscFill.FILL_TYPE_PATT) { - //pattern.asc_putPatternType(this.PatternFillType); + pattern.asc_setType(this.PatternFillType); //pattern.asc_putColorBg(Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color)); } //this.propsFill.asc_putPatternFill(pattern); @@ -991,9 +990,9 @@ define([ this.BGColor = {Value: 1, Color: color}; if (this.api && !this._noApply) { var pattern = new Asc.asc_CPatternFill(); - //pattern.asc_putType(Asc.c_oAscFill.FILL_TYPE_PATT); + pattern.asc_setType(Asc.c_oAscFill.FILL_TYPE_PATT); if (this.OriginalFillType !== Asc.c_oAscFill.FILL_TYPE_PATT) { - //pattern.asc_putPatternType(this.PatternFillType); + pattern.asc_setType(this.PatternFillType); //pattern.asc_putColorFg(Common.Utils.ThemeColor.getRgbColor(this.FGColor.Color)); } //pattern.asc_putColorBg(Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color)); From ee0c25d1f108824f34889d29f8d768d9ae66f5bb Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Fri, 6 Sep 2019 09:44:07 +0300 Subject: [PATCH 08/11] [SSE] Cell fill --- .../main/app/view/CellSettings.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/apps/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js index e6d6b706c..fb82d5d6b 100644 --- a/apps/spreadsheeteditor/main/app/view/CellSettings.js +++ b/apps/spreadsheeteditor/main/app/view/CellSettings.js @@ -820,7 +820,22 @@ define([ this._state.FillType = Asc.c_oAscFill.FILL_TYPE_GRAD; if (!this._noApply) { var gradient = new Asc.asc_CGradientFill(); - //TO DO + gradient.asc_setType(this.GradFillType); + if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { + gradient.asc_setDegree(this.GradLinearDirectionType); + } + if (this.OriginalFillType !== Asc.c_oAscFill.FILL_TYPE_GRAD) { + var HexColor0 = Common.Utils.ThemeColor.getRgbColor(this.GradColors[0].Color).get_color().get_hex(); + + if (HexColor0 === 'ffffff' && HexColor1 === 'ffffff') { + HexColor0 = {color: '4f81bd', effectId: 24}; // color accent1 + } else { + HexColor0 = this.GradColors[0].Color; + } + //gradient.asc_setColors(Common.Utils.ThemeColor.getRgbColor(HexColor0), Common.Utils.ThemeColor.getRgbColor(this.GradColors[1].Color;)); + } + //this.propsFill.asc_putGradientFill(gradient); + //this.api.asc_setGraphicObjectProps(this.propsFill); } break; case Asc.c_oAscFill.FILL_TYPE_PATT: From f8e78fc48f6f710d815baabba3681fae17714bec Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Tue, 10 Sep 2019 11:19:42 +0300 Subject: [PATCH 09/11] [SSE] Cell fill --- .../main/app/view/CellSettings.js | 53 ++++++++++++------- 1 file changed, 33 insertions(+), 20 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js index fb82d5d6b..6448019cd 100644 --- a/apps/spreadsheeteditor/main/app/view/CellSettings.js +++ b/apps/spreadsheeteditor/main/app/view/CellSettings.js @@ -420,7 +420,7 @@ define([ this.GradColors[0] = {Value: 1, Color: '000000', Position: 0}; this.GradColors[1] = {Value: 1, Color: 'ffffff', Position: 1}; } else if (pattern !== null) { - if(pattern.asc_getType() === Asc.c_oAscPatternType.Solid) { + if(pattern.asc_getType() === -1) { var color = pattern.asc_getFgColor(); if (color.getType() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) { this.CellColor = {Value: 1, Color: {color: Common.Utils.ThemeColor.getHexColor(color.getR(), color.getG(), color.getB()), effectValue: color.get_value() }}; @@ -811,7 +811,7 @@ define([ this._state.FillType = Asc.c_oAscFill.FILL_TYPE_SOLID; if (!this._noApply) { var pattern = new Asc.asc_CPatternFill(); - //pattern.asc_putColor(Common.Utils.ThemeColor.getRgbColor((this.CellColor.Color=='transparent') ? {color: '4f81bd', effectId: 24} : this.CellColor.Color)); + pattern.asc_setFgColor(Common.Utils.ThemeColor.getRgbColor((this.CellColor.Color=='transparent') ? {color: '4f81bd', effectId: 24} : this.CellColor.Color)); //this.propsFill.asc_putPatternFill(pattern); //this.api.asc_setGraphicObjectProps(this.propsFill); } @@ -825,14 +825,19 @@ define([ gradient.asc_setDegree(this.GradLinearDirectionType); } if (this.OriginalFillType !== Asc.c_oAscFill.FILL_TYPE_GRAD) { - var HexColor0 = Common.Utils.ThemeColor.getRgbColor(this.GradColors[0].Color).get_color().get_hex(); + var HexColor0 = Common.Utils.ThemeColor.getRgbColor(this.GradColors[0].Color).get_color().get_hex(), + HexColor1 = Common.Utils.ThemeColor.getRgbColor(this.GradColors[1].Color).get_color().get_hex(); if (HexColor0 === 'ffffff' && HexColor1 === 'ffffff') { - HexColor0 = {color: '4f81bd', effectId: 24}; // color accent1 - } else { - HexColor0 = this.GradColors[0].Color; + this.GradColors[0].Color = {color: '4f81bd', effectId: 24}; // color accent1 } - //gradient.asc_setColors(Common.Utils.ThemeColor.getRgbColor(HexColor0), Common.Utils.ThemeColor.getRgbColor(this.GradColors[1].Color;)); + + this.GradColors.forEach(function (item) { + var gradientStop = new Asc.asc_CGradientStop(); + gradientStop.asc_setColor(Common.Utils.ThemeColor.getRgbColor(item.Color)); + gradientStop.asc_setPosition(item.Position); + gradient.asc_addGradientStop(gradientStop); + }); } //this.propsFill.asc_putGradientFill(gradient); //this.api.asc_setGraphicObjectProps(this.propsFill); @@ -851,8 +856,8 @@ define([ } else { fHexColor = this.FGColor.Color; } - //pattern.asc_putColorFg(Common.Utils.ThemeColor.getRgbColor(fHexColor)); - //pattern.asc_putColorBg(Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color)); + pattern.asc_setFgColor(Common.Utils.ThemeColor.getRgbColor(fHexColor)); + pattern.asc_setBgColor(Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color)); //this.propsFill.asc_putPatternFill(pattern); //this.api.asc_setGraphicObjectProps(this.propsFill); } @@ -946,7 +951,7 @@ define([ }, onColorsGradientSelect: function(picker, color) { - var pickerId = $(picker)[0].el.id; + var pickerId = picker.el.id; if (pickerId === "cell-gradient-color1-menu") { this.btnGradColor1.setColor(color); this.GradColors[0].Color = color; @@ -957,11 +962,19 @@ define([ if (this.api && !this._noApply) { var gradient = new Asc.asc_CGradientFill(); - var arr = []; - this.GradColors.forEach(function(item){ - arr.push(Common.Utils.ThemeColor.getRgbColor(item.Color)); + if (this.OriginalFillType !== Asc.c_oAscFill.FILL_TYPE_GRAD) { + gradient.asc_setType(this.GradFillType); + if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { + gradient.asc_setDegree(this.GradLinearDirectionType); + } + } + this.GradColors.forEach(function (item) { + var gradientStop = new Asc.asc_CGradientStop(); + gradientStop.asc_setColor(Common.Utils.ThemeColor.getRgbColor(item.Color)); + gradientStop.asc_setPosition(item.Position); + gradient.asc_addGradientStop(gradientStop); }); - //gradient.asc_putColors(arr); + //this.propsFill.asc_putGradientFill(gradient); //this.api.asc_setGraphicObjectProps(this.propsFill); } @@ -974,8 +987,8 @@ define([ var pattern = new Asc.asc_CPatternFill(); pattern.asc_setType(this.PatternFillType); if (this.OriginalFillType !== Asc.c_oAscFill.FILL_TYPE_PATT) { - //fill.asc_getFill().asc_putColorFg(Common.Utils.ThemeColor.getRgbColor(this.FGColor.Color)); - //fill.asc_getFill().asc_putColorBg(Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color)); + pattern.asc_setFgColor(Common.Utils.ThemeColor.getRgbColor(this.FGColor.Color)); + pattern.asc_setBgColor(Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color)); } //this.propsFill.asc_putPatternFill(pattern); //this.api.asc_setGraphicObjectProps(this.propsFill); @@ -989,10 +1002,10 @@ define([ if (this.api && !this._noApply) { var pattern = new Asc.asc_CPatternFill(); pattern.asc_setType(Asc.c_oAscFill.FILL_TYPE_PATT); - //pattern.asc_putColorFg(Common.Utils.ThemeColor.getRgbColor(this.FGColor.Color)); + pattern.asc_setFgColor(Common.Utils.ThemeColor.getRgbColor(this.FGColor.Color)); if (this.OriginalFillType !== Asc.c_oAscFill.FILL_TYPE_PATT) { pattern.asc_setType(this.PatternFillType); - //pattern.asc_putColorBg(Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color)); + pattern.asc_setBgColor(Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color)); } //this.propsFill.asc_putPatternFill(pattern); //this.api.asc_setGraphicObjectProps(this.propsFill); @@ -1006,11 +1019,11 @@ define([ if (this.api && !this._noApply) { var pattern = new Asc.asc_CPatternFill(); pattern.asc_setType(Asc.c_oAscFill.FILL_TYPE_PATT); + pattern.asc_setBgColor(Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color)); if (this.OriginalFillType !== Asc.c_oAscFill.FILL_TYPE_PATT) { pattern.asc_setType(this.PatternFillType); - //pattern.asc_putColorFg(Common.Utils.ThemeColor.getRgbColor(this.FGColor.Color)); + pattern.asc_setFgColor(Common.Utils.ThemeColor.getRgbColor(this.FGColor.Color)); } - //pattern.asc_putColorBg(Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color)); //this.propsFill.asc_putPatternFill(pattern); //this.api.asc_setGraphicObjectProps(this.propsFill); } From 48ed19b11902835b72758f2b690ea350d1589526 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Wed, 11 Sep 2019 11:40:24 +0300 Subject: [PATCH 10/11] [SSE] Cell fill --- .../main/app/view/CellSettings.js | 176 ++++++++++-------- 1 file changed, 100 insertions(+), 76 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js index 6448019cd..58abb7e8c 100644 --- a/apps/spreadsheeteditor/main/app/view/CellSettings.js +++ b/apps/spreadsheeteditor/main/app/view/CellSettings.js @@ -409,19 +409,19 @@ define([ this.spnAngle.setValue((value !== null) ? value : '', true); this._state.CellAngle=value; } - var fill = props.asc_getFill2(), - pattern = fill.asc_getPatternFill(), - gradient = fill.asc_getGradientFill(); - if (pattern === null && gradient === null) { + this.fill = props.asc_getFill2(); + this.pattern = this.fill.asc_getPatternFill(); + this.gradient = this.fill.asc_getGradientFill(); + if (this.pattern === null && this.gradient === null) { this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_NOFILL; this.CellColor = {Value: 0, Color: 'transparent'}; this.FGColor = {Value: 1, Color: '000000'}; this.BGColor = {Value: 1, Color: 'ffffff'}; this.GradColors[0] = {Value: 1, Color: '000000', Position: 0}; this.GradColors[1] = {Value: 1, Color: 'ffffff', Position: 1}; - } else if (pattern !== null) { - if(pattern.asc_getType() === -1) { - var color = pattern.asc_getFgColor(); + } else if (this.pattern !== null) { + if(this.pattern.asc_getType() === -1) { + var color = this.pattern.asc_getFgColor(); if (color.getType() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) { this.CellColor = {Value: 1, Color: {color: Common.Utils.ThemeColor.getHexColor(color.getR(), color.getG(), color.getB()), effectValue: color.get_value() }}; } else { @@ -433,7 +433,7 @@ define([ this.GradColors[0] = {Value: 1, Color: Common.Utils.ThemeColor.colorValue2EffectId(this.CellColor.Color), Position: 0}; this.GradColors[1] = {Value: 1, Color: 'ffffff', Position: 1}; } else { - this.PatternFillType = pattern.asc_getType(); + this.PatternFillType = this.pattern.asc_getType(); if (this._state.PatternFillType !== this.PatternFillType) { this.cmbPattern.suspendEvents(); var rec = this.cmbPattern.menuPicker.store.findWhere({ @@ -443,7 +443,7 @@ define([ this.cmbPattern.resumeEvents(); this._state.PatternFillType = this.PatternFillType; } - var color = pattern.asc_getFgColor(); + var color = this.pattern.asc_getFgColor(); if (color) { if (color.getType() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) { this.FGColor = {Value: 1, Color: {color: Common.Utils.ThemeColor.getHexColor(color.getR(), color.getG(), color.getB()), effectValue: color.asc_getValue() }}; @@ -453,7 +453,7 @@ define([ } else this.FGColor = {Value: 1, Color: '000000'}; - color = pattern.asc_getBgColor(); + color = this.pattern.asc_getBgColor(); if (color) { if (color.getType() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) { this.BGColor = {Value: 1, Color: {color: Common.Utils.ThemeColor.getHexColor(color.getR(), color.getG(), color.getB()), effectValue: color.asc_getValue() }}; @@ -467,8 +467,8 @@ define([ this.GradColors[1] = {Value: 1, Color: 'ffffff', Position: 1}; this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_PATT; } - } else if (gradient !== null) { - var gradFillType = gradient.asc_getType(); + } else if (this.gradient !== null) { + var gradFillType = this.gradient.asc_getType(); if (this._state.GradFillType !== gradFillType || this.GradFillType !== gradFillType) { this.GradFillType = gradFillType; rec = undefined; @@ -483,7 +483,7 @@ define([ this._state.GradFillType = this.GradFillType; } if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { - var value = gradient.asc_getDegree(); + var value = this.gradient.asc_getDegree(); if (Math.abs(this.GradLinearDirectionType-value)>0.001) { this.GradLinearDirectionType=value; var record = this.mnuDirectionPicker.store.findWhere({type: value}); @@ -496,8 +496,8 @@ define([ } var gradientStops; - this.GradColors = []; - gradientStops = gradient.asc_getGradientStops(); + this.GradColors.length = 0; + gradientStops = this.gradient.asc_getGradientStops(); gradientStops.forEach(function (color) { var clr = color.asc_getColor(), position = color.asc_getPosition(), @@ -805,24 +805,28 @@ define([ }, onFillSrcSelect: function(combo, record) { + var me = this; this.ShowHideElem(record.value); switch (record.value){ case Asc.c_oAscFill.FILL_TYPE_SOLID: this._state.FillType = Asc.c_oAscFill.FILL_TYPE_SOLID; if (!this._noApply) { - var pattern = new Asc.asc_CPatternFill(); - pattern.asc_setFgColor(Common.Utils.ThemeColor.getRgbColor((this.CellColor.Color=='transparent') ? {color: '4f81bd', effectId: 24} : this.CellColor.Color)); - //this.propsFill.asc_putPatternFill(pattern); - //this.api.asc_setGraphicObjectProps(this.propsFill); + if (this.pattern == null) + this.pattern = new Asc.asc_CPatternFill(); + this.pattern.asc_setType(-1); + this.pattern.asc_setFgColor(Common.Utils.ThemeColor.getRgbColor((this.CellColor.Color=='transparent') ? {color: '4f81bd', effectId: 24} : this.CellColor.Color)); + this.fill.asc_setPatternFill(this.pattern); + this.api.asc_setCellFill(this.fill); } break; case Asc.c_oAscFill.FILL_TYPE_GRAD: this._state.FillType = Asc.c_oAscFill.FILL_TYPE_GRAD; if (!this._noApply) { - var gradient = new Asc.asc_CGradientFill(); - gradient.asc_setType(this.GradFillType); + if (this.gradient == null) + this.gradient = new Asc.asc_CGradientFill(); + this.gradient.asc_setType(this.GradFillType); if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { - gradient.asc_setDegree(this.GradLinearDirectionType); + this.gradient.asc_setDegree(this.GradLinearDirectionType); } if (this.OriginalFillType !== Asc.c_oAscFill.FILL_TYPE_GRAD) { var HexColor0 = Common.Utils.ThemeColor.getRgbColor(this.GradColors[0].Color).get_color().get_hex(), @@ -836,18 +840,16 @@ define([ var gradientStop = new Asc.asc_CGradientStop(); gradientStop.asc_setColor(Common.Utils.ThemeColor.getRgbColor(item.Color)); gradientStop.asc_setPosition(item.Position); - gradient.asc_addGradientStop(gradientStop); + me.gradient.asc_addGradientStop(gradientStop); }); } - //this.propsFill.asc_putGradientFill(gradient); - //this.api.asc_setGraphicObjectProps(this.propsFill); + this.fill.asc_setGradientFill(this.gradient); + this.api.asc_setCellFill(this.fill); } break; case Asc.c_oAscFill.FILL_TYPE_PATT: this._state.FillType = Asc.c_oAscFill.FILL_TYPE_PATT; if (!this._noApply) { - var pattern = new Asc.asc_CPatternFill(); - var fHexColor = Common.Utils.ThemeColor.getRgbColor(this.FGColor.Color).get_color().get_hex(); var bHexColor = Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color).get_color().get_hex(); @@ -856,18 +858,21 @@ define([ } else { fHexColor = this.FGColor.Color; } - pattern.asc_setFgColor(Common.Utils.ThemeColor.getRgbColor(fHexColor)); - pattern.asc_setBgColor(Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color)); - //this.propsFill.asc_putPatternFill(pattern); - //this.api.asc_setGraphicObjectProps(this.propsFill); + if (this.pattern == null) + this.pattern = new Asc.asc_CPatternFill(); + this.pattern.asc_setType(this.PatternFillType); + this.pattern.asc_setFgColor(Common.Utils.ThemeColor.getRgbColor(fHexColor)); + this.pattern.asc_setBgColor(Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color)); + this.fill.asc_setPatternFill(this.pattern); + this.api.asc_setCellFill(this.fill); } break; case Asc.c_oAscFill.FILL_TYPE_NOFILL: this._state.FillType = Asc.c_oAscFill.FILL_TYPE_NOFILL; if (!this._noApply) { - //this.propsFill.asc_putPatternFill(null); - //this.propsFill.asc_putGradientFill(null); - //this.api.asc_setGraphicObjectProps(this.propsFill); + this.fill.asc_setPatternFill(null); + this.fill.asc_setGradientFill(null); + this.api.asc_setCellFill(this.fill); } break; } @@ -905,19 +910,31 @@ define([ } if (this.api && !this._noApply) { - var gradient = new Asc.asc_CGradientFill(); - if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { - gradient.asc_setDegree(this.GradLinearDirectionType); + if (this.gradient == null) { + this.gradient = new Asc.asc_CGradientFill(); + if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { + this.gradient.asc_setDegree(this.GradLinearDirectionType); + } + this.GradColors.forEach(function (item) { + var gradientStop = new Asc.asc_CGradientStop(); + gradientStop.asc_setColor(Common.Utils.ThemeColor.getRgbColor(item.Color)); + gradientStop.asc_setPosition(item.Position); + me.gradient.asc_addGradientStop(gradientStop); + }); } - gradient.asc_setType(this.GradFillType); - //this.propsFill.asc_putGradientFill(gradient); - //this.api.asc_setGraphicObjectProps(this.propsFill); + if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { + this.gradient.asc_setDegree(this.GradLinearDirectionType); + } + this.gradient.asc_setType(this.GradFillType); + this.fill.asc_setGradientFill(this.gradient); + this.api.asc_setCellFill(this.fill); } Common.NotificationCenter.trigger('edit:complete', this); }, onSelectGradient: function(btn, picker, itemView, record) { + var me = this; if (this._noApply) return; var rawData = {}, @@ -939,11 +956,19 @@ define([ if (this.api) { if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { - var gradient = new Asc.asc_CGradientFill(); - gradient.asc_setDegree(rawData.type); - - //this.propsFill.asc_putGradientFill(gradient); - //this.api.asc_setGraphicObjectProps(this.propsFill); + if (this.gradient == null) { + this.gradient = new Asc.asc_CGradientFill(); + this.gradient.asc_setType(this.GradFillType); + this.GradColors.forEach(function (item) { + var gradientStop = new Asc.asc_CGradientStop(); + gradientStop.asc_setColor(Common.Utils.ThemeColor.getRgbColor(item.Color)); + gradientStop.asc_setPosition(item.Position); + me.gradient.asc_addGradientStop(gradientStop); + }); + } + this.gradient.asc_setDegree(rawData.type); + this.fill.asc_setGradientFill(this.gradient); + this.api.asc_setCellFill(this.fill); } } @@ -951,7 +976,8 @@ define([ }, onColorsGradientSelect: function(picker, color) { - var pickerId = picker.el.id; + var me = this, + pickerId = picker.el.id; if (pickerId === "cell-gradient-color1-menu") { this.btnGradColor1.setColor(color); this.GradColors[0].Color = color; @@ -961,22 +987,22 @@ define([ } if (this.api && !this._noApply) { - var gradient = new Asc.asc_CGradientFill(); - if (this.OriginalFillType !== Asc.c_oAscFill.FILL_TYPE_GRAD) { - gradient.asc_setType(this.GradFillType); + if (this.gradient == null) { + this.gradient = new Asc.asc_CGradientFill(); + this.gradient.asc_setType(this.GradFillType); if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { - gradient.asc_setDegree(this.GradLinearDirectionType); + this.gradient.asc_setDegree(this.GradLinearDirectionType); } } this.GradColors.forEach(function (item) { var gradientStop = new Asc.asc_CGradientStop(); gradientStop.asc_setColor(Common.Utils.ThemeColor.getRgbColor(item.Color)); gradientStop.asc_setPosition(item.Position); - gradient.asc_addGradientStop(gradientStop); + me.gradient.asc_addGradientStop(gradientStop); }); - //this.propsFill.asc_putGradientFill(gradient); - //this.api.asc_setGraphicObjectProps(this.propsFill); + this.fill.asc_setGradientFill(this.gradient); + this.api.asc_setCellFill(this.fill); } Common.NotificationCenter.trigger('edit:complete', this); }, @@ -984,14 +1010,14 @@ define([ onPatternSelect: function(combo, record) { if (this.api && !this._noApply) { this.PatternFillType = record.get('type'); - var pattern = new Asc.asc_CPatternFill(); - pattern.asc_setType(this.PatternFillType); - if (this.OriginalFillType !== Asc.c_oAscFill.FILL_TYPE_PATT) { - pattern.asc_setFgColor(Common.Utils.ThemeColor.getRgbColor(this.FGColor.Color)); - pattern.asc_setBgColor(Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color)); + if (this.pattern == null) { + this.pattern = new Asc.asc_CPatternFill(); + this.pattern.asc_setFgColor(Common.Utils.ThemeColor.getRgbColor(this.FGColor.Color)); + this.pattern.asc_setBgColor(Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color)); } - //this.propsFill.asc_putPatternFill(pattern); - //this.api.asc_setGraphicObjectProps(this.propsFill); + this.pattern.asc_setType(this.PatternFillType); + this.fill.asc_setPatternFill(this.pattern); + this.api.asc_setCellFill(this.fill); } Common.NotificationCenter.trigger('edit:complete', this); }, @@ -1000,15 +1026,14 @@ define([ this.btnFGColor.setColor(color); this.FGColor = {Value: 1, Color: color}; if (this.api && !this._noApply) { - var pattern = new Asc.asc_CPatternFill(); - pattern.asc_setType(Asc.c_oAscFill.FILL_TYPE_PATT); - pattern.asc_setFgColor(Common.Utils.ThemeColor.getRgbColor(this.FGColor.Color)); - if (this.OriginalFillType !== Asc.c_oAscFill.FILL_TYPE_PATT) { - pattern.asc_setType(this.PatternFillType); - pattern.asc_setBgColor(Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color)); + if (this.pattern == null) { + this.pattern = new Asc.asc_CPatternFill(); + this.pattern.asc_setType(this.PatternFillType); + this.pattern.asc_setBgColor(Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color)); } - //this.propsFill.asc_putPatternFill(pattern); - //this.api.asc_setGraphicObjectProps(this.propsFill); + this.pattern.asc_setFgColor(Common.Utils.ThemeColor.getRgbColor(this.FGColor.Color)); + this.fill.asc_setPatternFill(this.pattern); + this.api.asc_setCellFill(this.fill); } Common.NotificationCenter.trigger('edit:complete', this); }, @@ -1017,15 +1042,14 @@ define([ this.btnBGColor.setColor(color); this.BGColor = {Value: 1, Color: color}; if (this.api && !this._noApply) { - var pattern = new Asc.asc_CPatternFill(); - pattern.asc_setType(Asc.c_oAscFill.FILL_TYPE_PATT); - pattern.asc_setBgColor(Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color)); - if (this.OriginalFillType !== Asc.c_oAscFill.FILL_TYPE_PATT) { - pattern.asc_setType(this.PatternFillType); - pattern.asc_setFgColor(Common.Utils.ThemeColor.getRgbColor(this.FGColor.Color)); + if (this.pattern == null) { + this.pattern = new Asc.asc_CPatternFill(); + this.pattern.asc_setFgColor(Common.Utils.ThemeColor.getRgbColor(this.FGColor.Color)); + this.pattern.asc_setType(this.PatternFillType); } - //this.propsFill.asc_putPatternFill(pattern); - //this.api.asc_setGraphicObjectProps(this.propsFill); + this.pattern.asc_setBgColor(Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color)); + this.fill.asc_setPatternFill(this.pattern); + this.api.asc_setCellFill(this.fill); } Common.NotificationCenter.trigger('edit:complete', this); }, From 06a93179aca5061ec9f12b8c8c8a27cb5efe00c3 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Thu, 12 Sep 2019 10:56:48 +0300 Subject: [PATCH 11/11] [SSE] Cell fill --- .../main/app/view/CellSettings.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js index 58abb7e8c..26823849a 100644 --- a/apps/spreadsheeteditor/main/app/view/CellSettings.js +++ b/apps/spreadsheeteditor/main/app/view/CellSettings.js @@ -835,13 +835,14 @@ define([ if (HexColor0 === 'ffffff' && HexColor1 === 'ffffff') { this.GradColors[0].Color = {color: '4f81bd', effectId: 24}; // color accent1 } - + var arrGradStop = []; this.GradColors.forEach(function (item) { var gradientStop = new Asc.asc_CGradientStop(); gradientStop.asc_setColor(Common.Utils.ThemeColor.getRgbColor(item.Color)); gradientStop.asc_setPosition(item.Position); - me.gradient.asc_addGradientStop(gradientStop); + arrGradStop.push(gradientStop); }); + this.gradient.asc_putGradientStops(arrGradStop); } this.fill.asc_setGradientFill(this.gradient); this.api.asc_setCellFill(this.fill); @@ -915,12 +916,14 @@ define([ if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { this.gradient.asc_setDegree(this.GradLinearDirectionType); } + var arrGradStop = []; this.GradColors.forEach(function (item) { var gradientStop = new Asc.asc_CGradientStop(); gradientStop.asc_setColor(Common.Utils.ThemeColor.getRgbColor(item.Color)); gradientStop.asc_setPosition(item.Position); - me.gradient.asc_addGradientStop(gradientStop); + arrGradStop.push(gradientStop); }); + this.gradient.asc_putGradientStops(arrGradStop); } if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { this.gradient.asc_setDegree(this.GradLinearDirectionType); @@ -959,12 +962,14 @@ define([ if (this.gradient == null) { this.gradient = new Asc.asc_CGradientFill(); this.gradient.asc_setType(this.GradFillType); + var arrGradStop = []; this.GradColors.forEach(function (item) { var gradientStop = new Asc.asc_CGradientStop(); gradientStop.asc_setColor(Common.Utils.ThemeColor.getRgbColor(item.Color)); gradientStop.asc_setPosition(item.Position); - me.gradient.asc_addGradientStop(gradientStop); + arrGradStop.push(gradientStop); }); + this.gradient.asc_putGradientStops(arrGradStop); } this.gradient.asc_setDegree(rawData.type); this.fill.asc_setGradientFill(this.gradient); @@ -994,12 +999,14 @@ define([ this.gradient.asc_setDegree(this.GradLinearDirectionType); } } + var arrGradStop = []; this.GradColors.forEach(function (item) { var gradientStop = new Asc.asc_CGradientStop(); gradientStop.asc_setColor(Common.Utils.ThemeColor.getRgbColor(item.Color)); gradientStop.asc_setPosition(item.Position); - me.gradient.asc_addGradientStop(gradientStop); + arrGradStop.push(gradientStop); }); + this.gradient.asc_putGradientStops(arrGradStop); this.fill.asc_setGradientFill(this.gradient); this.api.asc_setCellFill(this.fill);