pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-07-24 04:45:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

[DE] Change line size for drawing

Browse Source
This commit is contained in:
Julia Radzhabova
2023-03-29 19:00:00 +03:00
parent fbcc77e76d
commit 7d363be7ab
4 changed files with 75 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
apps/common/main/lib/component/UpDownPicker.js
View File

@ -50,15 +50,16 @@ define([
options: {
caption: '',
iconUpCls: 'btn-zoomup',
iconDownCls: 'btn-zoomdown'
iconDownCls: 'btn-zoomdown',
minWidth: 40
},
disabled : false,
template:_.template([
'<label class="title"><%= options.caption %></label>',
'<button type="button" class="btn small btn-toolbar updown-picker-button-up"><i class="icon toolbar__icon <%= options.iconUpCls %>">&nbsp;</i></button>',
'<label class="updown-picker-value"></label>',
'<button type="button" class="btn small btn-toolbar updown-picker-button-down"><i class="icon toolbar__icon <%= options.iconDownCls %>">&nbsp;</i></button>'
'<button type="button" class="btn small btn-toolbar updown-picker-button-up"><i class="icon menu__icon <%= options.iconUpCls %>">&nbsp;</i></button>',
'<label class="updown-picker-value" style="min-width: <%= options.minWidth %>px;"></label>',
'<button type="button" class="btn small btn-toolbar updown-picker-button-down"><i class="icon menu__icon <%= options.iconDownCls %>">&nbsp;</i></button>'
].join('')),
initialize : function(options) {

31
apps/common/main/lib/controller/Draw.js
View File

@ -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();
},

45
apps/common/main/lib/view/Draw.js
View File

@ -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('<div id="id-toolbar-menu-draw-pen-' + id + '" style="width: 145px; display: inline-block;" class="palette-large"></div>')},
{
template: _.template('<div id="id-toolbar-menu-draw-pen-' + id + '" style="width: 145px; display: inline-block;" class="palette-large"></div>'),
stopPropagation: true
},
{
id: id + '-color-new',
template: _.template('<a tabindex="-1" type="menuitem" style="">' + button.textNewColor + '</a>')
},
{caption: '--'},
{
caption: this.txtSize
template: _.template('<div id="id-toolbar-draw-updownpicker-' + id + '" class="custom-scale" data-stopPropagation="true"></div>'),
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) {

12
apps/common/main/resources/less/updown-picker.less
View File

@ -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 & {