From 7d363be7abfd05fa1eef7115e87d6591f3f6de97 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 29 Mar 2023 19:00:00 +0300 Subject: [PATCH] [DE] Change line size for drawing --- .../common/main/lib/component/UpDownPicker.js | 9 ++-- apps/common/main/lib/controller/Draw.js | 31 ++++++++++++- apps/common/main/lib/view/Draw.js | 45 ++++++++++++------- .../main/resources/less/updown-picker.less | 12 ++++- 4 files changed, 75 insertions(+), 22 deletions(-) diff --git a/apps/common/main/lib/component/UpDownPicker.js b/apps/common/main/lib/component/UpDownPicker.js index e1f7201825..293269b366 100644 --- a/apps/common/main/lib/component/UpDownPicker.js +++ b/apps/common/main/lib/component/UpDownPicker.js @@ -50,15 +50,16 @@ define([ options: { caption: '', iconUpCls: 'btn-zoomup', - iconDownCls: 'btn-zoomdown' + iconDownCls: 'btn-zoomdown', + minWidth: 40 }, disabled : false, template:_.template([ '', - '', - '', - '' + '', + '', + '' ].join('')), initialize : function(options) { diff --git a/apps/common/main/lib/controller/Draw.js b/apps/common/main/lib/controller/Draw.js index ecc71b91bb..df81560f13 100644 --- a/apps/common/main/lib/controller/Draw.js +++ b/apps/common/main/lib/controller/Draw.js @@ -66,7 +66,9 @@ define([ 'Common.Views.Draw': { 'draw:select': _.bind(this.onSelect, this), 'draw:eraser': _.bind(this.onEraser, this), - 'draw:pen': _.bind(this.onDrawPen, this) + 'draw:pen': _.bind(this.onDrawPen, this), + 'draw:size': _.bind(this.onDrawSizeClick, this), + 'draw:color': _.bind(this.onDrawColorClick, this) } }); }, @@ -139,13 +141,38 @@ define([ stroke.put_type( Asc.c_oAscStrokeType.STROKE_COLOR); stroke.put_color(Common.Utils.ThemeColor.getRgbColor(options.color)); stroke.asc_putPrstDash(Asc.c_oDashType.solid); - stroke.put_width(options.size); + stroke.put_width(options.size.arr[options.size.idx]); stroke.put_transparent(options.opacity * 2.55); this.api.asc_StartDrawInk(stroke); } } }, + onDrawSizeClick: function(btn, direction){ + if (!btn.pressed) { + btn.toggle(true, true); + this.view && this.view.depressButtons(btn); + } + + var options = btn.options.penOptions; + options.size.idx = (direction==='up') ? Math.min(options.size.idx+1, options.size.arr.length-1) : Math.max(options.size.idx-1, 0); + this.view && this.view.updateButtonHint(btn); + + this.onDrawPen(btn); + }, + + onDrawColorClick: function(btn, color){ + if (!btn.pressed) { + btn.toggle(true, true); + this.view && this.view.depressButtons(btn); + } + + btn.options.penOptions.color = color; + this.view && this.view.updateButtonHint(btn); + + this.onDrawPen(btn); + }, + createToolbarPanel: function() { return this.view.getPanel(); }, diff --git a/apps/common/main/lib/view/Draw.js b/apps/common/main/lib/view/Draw.js index a4c4ed2be4..bbf4c2316b 100644 --- a/apps/common/main/lib/view/Draw.js +++ b/apps/common/main/lib/view/Draw.js @@ -47,7 +47,8 @@ define([ 'common/main/lib/util/utils', 'common/main/lib/component/BaseView', 'common/main/lib/component/Layout', - 'common/main/lib/component/Window' + 'common/main/lib/component/Window', + 'common/main/lib/component/UpDownPicker' ], function (template) { 'use strict'; @@ -73,14 +74,7 @@ define([ me.fireEvent('draw:pen', [b]); }); button.on('color:select', function (b, color) { - if (!b.pressed) { - b.toggle(true, true); - me.depressButtons(b); - } - - b.options.penOptions.color = color; - me.updateButtonHint(b); - me.fireEvent('draw:pen', [b]); + me.fireEvent('draw:color', [b, color]); }); }); me.btnSelect.on('click', function (b) { @@ -106,9 +100,9 @@ define([ this.appPrefix = (filter && filter.length) ? filter.split(',')[0] : ''; var penOptions = [ - {hint: this.txtPen, color: 'FF0000', size: 1, opacity: 100}, - {hint: this.txtPen, color: '00FF00', size: 1, opacity: 100}, - {hint: this.txtPen, color: '0000FF', size: 5, opacity: 50} + {hint: this.txtPen, color: 'FF0000', opacity: 100, size: {arr: [0.25, 0.5, 1, 2, 3.5], idx: 2}}, + {hint: this.txtPen, color: '00FF00', opacity: 100, size: {arr: [0.25, 0.5, 1, 2, 3.5], idx: 2}}, + {hint: this.txtPen, color: '0000FF', opacity: 50, size: {arr: [2, 4, 6, 8, 10], idx: 2}} ], me = this; penOptions.forEach(function (props) { @@ -163,7 +157,8 @@ define([ updateButtonHint: function(button) { var config = button.options.penOptions; - button.updateHint(config.hint + ': ' + Common.Utils.ThemeColor.getTranslation(Common.Utils.ThemeColor.getRgbColor(config.color).asc_getName()) + ', ' + config.size + ' ' + this.txtMM); + button.updateHint(config.hint + ': ' + Common.Utils.ThemeColor.getTranslation(Common.Utils.ThemeColor.getRgbColor(config.color).asc_getName()) + ', ' + config.size.arr[config.size.idx] + ' ' + this.txtMM); + button.sizePicker && button.sizePicker.setValue(config.size.arr[config.size.idx] + ' ' + this.txtMM); }, createPen: function(button) { @@ -176,17 +171,22 @@ define([ cls: 'shifted-left', style: 'min-width: 100px;', items: [ - {template: _.template('
')}, + { + template: _.template('
'), + stopPropagation: true + }, { id: id + '-color-new', template: _.template('' + button.textNewColor + '') }, {caption: '--'}, { - caption: this.txtSize + template: _.template('
'), + stopPropagation: true } ] }), true ); + // color button.currentColor = config.color; button.setColor(button.currentColor); var picker = new Common.UI.ThemeColorPalette({ @@ -208,6 +208,21 @@ define([ button.menu.cmpEl.find('#' + id + '-color-new').on('click', function() { picker.addNewColor(button.currentColor); }); + // size + var onShowAfter = function(menu) { + var sizePicker = new Common.UI.UpDownPicker({ + el: $('#id-toolbar-draw-updownpicker-' + id), + caption: me.txtSize, + minWidth: 50 + }); + sizePicker.on('click', function (direction) { + me.fireEvent('draw:size', [button, direction]); + }); + sizePicker.setValue(button.options.penOptions.size.arr[button.options.penOptions.size.idx] + ' ' + me.txtMM); + button.sizePicker = sizePicker; + menu.off('show:after', onShowAfter); + }; + button.menu.on('show:after', onShowAfter); }, onAppReady: function (config) { diff --git a/apps/common/main/resources/less/updown-picker.less b/apps/common/main/resources/less/updown-picker.less index dd086e62f3..f2810c0310 100644 --- a/apps/common/main/resources/less/updown-picker.less +++ b/apps/common/main/resources/less/updown-picker.less @@ -7,6 +7,7 @@ .rtl & { padding: 5px 20px 5px 5px; } + .title { padding-top: 3px; padding-right: 5px; @@ -16,21 +17,30 @@ float: right; } } + + .shifted-left & { + padding-left: 12px; + .rtl & { + padding-right: 12px; + } + } + .updown-picker-button-up { float:right; .rtl & { float: left; } } + .updown-picker-value { float:right; padding: 3px 3px; - min-width: 40px; text-align: center; .rtl & { float: left; } } + .updown-picker-button-down { float:right; .rtl & {