Merge pull request 'fix/draw-reporter' (#258) from fix/draw-reporter into release/v8.3.0
Reviewed-on: https://git.onlyoffice.com/ONLYOFFICE/web-apps/pulls/258
Oleg Korshul
@ -71,8 +71,14 @@ define([
|
||||
onLaunch: function () {
|
||||
this._state = {};
|
||||
|
||||
Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
|
||||
Common.NotificationCenter.on('api:disconnect', _.bind(this.onCoAuthoringDisconnect, this));
|
||||
Common.NotificationCenter.on({
|
||||
'draw-tool:pen': this.startDraw.bind(this),
|
||||
'draw-tool:eraser': this.startEraser.bind(this),
|
||||
'draw-tool:select': this.stopDraw.bind(this),
|
||||
'draw-tool:erase-all': this.onEraseAllInksOnSlide.bind(this),
|
||||
'app:ready': this.onAppReady.bind(this),
|
||||
'api:disconnect': _.bind(this.onCoAuthoringDisconnect, this)
|
||||
});
|
||||
},
|
||||
|
||||
setConfig: function (data, api) {
|
||||
@ -115,34 +121,50 @@ define([
|
||||
Common.NotificationCenter.trigger('edit:complete', this.view);
|
||||
},
|
||||
|
||||
startEraser: function() {
|
||||
this.api && this.api.asc_StartInkEraser();
|
||||
Common.NotificationCenter.trigger('draw:start', this.view);
|
||||
},
|
||||
|
||||
onEraser: function(btn){
|
||||
if (this.api) {
|
||||
if (!btn.pressed)
|
||||
this.api.asc_StopInkDrawer();
|
||||
else {
|
||||
this.view.depressButtons(btn);
|
||||
this.api.asc_StartInkEraser();
|
||||
Common.NotificationCenter.trigger('draw:start', this.view);
|
||||
this.startEraser();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onEraseAllInksOnSlide: function() {
|
||||
this.api && this.api.asc_EraseAllInksOnSlide();
|
||||
},
|
||||
|
||||
startDraw: function(options) {
|
||||
if (!this.api) { return; }
|
||||
var stroke = new Asc.asc_CStroke();
|
||||
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_transparent(options.opacity * 2.55);
|
||||
this.api.asc_StartDrawInk(stroke, options.index);
|
||||
Common.NotificationCenter.trigger('draw:start', this.view);
|
||||
},
|
||||
|
||||
stopDraw: function() {
|
||||
this.api && this.api.asc_StopInkDrawer();
|
||||
Common.NotificationCenter.trigger('draw:stop', this.view);
|
||||
},
|
||||
|
||||
onDrawPen: function(btn){
|
||||
if (this.api) {
|
||||
if (!btn.pressed)
|
||||
this.api.asc_StopInkDrawer();
|
||||
else {
|
||||
this.view.depressButtons(btn);
|
||||
|
||||
var options = btn.options.penOptions;
|
||||
var stroke = new Asc.asc_CStroke();
|
||||
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.arr[options.size.idx]);
|
||||
stroke.put_transparent(options.opacity * 2.55);
|
||||
this.api.asc_StartDrawInk(stroke, options.idx);
|
||||
Common.NotificationCenter.trigger('draw:start', this.view);
|
||||
this.startDraw(btn.options.penOptions);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -258,7 +258,12 @@ define([
|
||||
reset: me.previewPanel.txtReset,
|
||||
endSlideshow: me.previewPanel.txtEndSlideshow,
|
||||
slideOf: me.previewPanel.slideIndexText,
|
||||
finalMessage: me.previewPanel.txtFinalMessage
|
||||
finalMessage: me.previewPanel.txtFinalMessage,
|
||||
pen: me.previewPanel.txtPen,
|
||||
highlighter: me.previewPanel.txtHighlighter,
|
||||
inkColor: me.previewPanel.txtInkColor,
|
||||
eraser: me.previewPanel.txtEraser,
|
||||
eraseScreen: me.previewPanel.txtEraseScreen,
|
||||
};
|
||||
reporterObject.token = me.api.asc_getSessionToken();
|
||||
reporterObject.customization = me.viewport.mode.customization;
|
||||
|
||||
@ -42,7 +42,8 @@ define([
|
||||
'backbone',
|
||||
'common/main/lib/component/BaseView',
|
||||
'presentationeditor/main/app/model/Pages',
|
||||
'common/main/lib/component/InputField'
|
||||
'common/main/lib/component/InputField',
|
||||
'common/main/lib/component/ColorPaletteExt',
|
||||
], function () {
|
||||
'use strict';
|
||||
|
||||
@ -76,7 +77,7 @@ define([
|
||||
!Common.UI.isRTL() ? '<button id="btn-preview-prev" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-previtem"> </i></button>' : '<button id="btn-preview-next" type="button" class="btn small btn-toolbar"><span class="icon toolbar__icon btn-nextitem"> </span></button>',
|
||||
'<button id="btn-preview-play" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-play"> </i></button>',
|
||||
!Common.UI.isRTL() ? '<button id="btn-preview-next" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-nextitem"> </i></button>' : '<button id="btn-preview-prev" type="button" class="btn small btn-toolbar"><span class="icon toolbar__icon btn-previtem"> </span></button>',
|
||||
'<div class="separator"></div>',
|
||||
'<div class="separator"></div>',
|
||||
'</div>',
|
||||
'<div class="preview-group dropup">',
|
||||
'<label id="preview-label-slides" class="status-label dropdown-toggle" data-toggle="dropdown">Slide 1 of 1</label>',
|
||||
@ -85,6 +86,10 @@ define([
|
||||
'<div id="preview-goto-page" style="display:inline-block;"></div>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'<div id="preview-group-draw" class="preview-group" style="display:flex;height: 100%;align-items: center;">',
|
||||
'<div class="separator"></div>',
|
||||
'<div id="btn-preview-draw"></div>',
|
||||
'</div>',
|
||||
'<div class="preview-group" style="">',
|
||||
'<div class="separator"></div>',
|
||||
'<button id="btn-preview-fullscreen" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-fullscreen"> </i></button>',
|
||||
@ -96,6 +101,14 @@ define([
|
||||
|
||||
this.pages = new PE.Models.Pages({current:1, count:1, start:1});
|
||||
this.pages.on('change', _.bind(_updatePagesCaption,this));
|
||||
this.currentDrawColor = 'E81416';
|
||||
this.drawTool = {
|
||||
pen: () => Common.NotificationCenter.trigger('draw-tool:pen', { index: 0, color: this.currentDrawColor, size: 1, opacity: 100 }),
|
||||
highlighter: () => Common.NotificationCenter.trigger('draw-tool:pen', { index: 1, color: this.currentDrawColor, size: 6, opacity: 50 }),
|
||||
eraser: () => Common.NotificationCenter.trigger('draw-tool:eraser'),
|
||||
eraseAll: () => Common.NotificationCenter.trigger('draw-tool:erase-all'),
|
||||
select: () => Common.NotificationCenter.trigger('draw-tool:select'),
|
||||
};
|
||||
},
|
||||
|
||||
render: function () {
|
||||
@ -105,6 +118,115 @@ define([
|
||||
scope: this
|
||||
}));
|
||||
|
||||
if (Common.Utils.isIE) {
|
||||
document.getElementById('preview-group-draw').style.display = 'none';
|
||||
} else {
|
||||
this.btnDraw = new Common.UI.Button({
|
||||
parentEl: $('#btn-preview-draw', this.el),
|
||||
cls: 'btn-toolbar small',
|
||||
iconCls: 'toolbar__icon btn-pen-tool',
|
||||
onlyIcon: true,
|
||||
stopPropagation: true,
|
||||
takeFocusOnClose: true,
|
||||
hint: this.txtDraw,
|
||||
hintAnchor: 'top',
|
||||
hintContainer: '#pe-preview',
|
||||
menu: new Common.UI.Menu({
|
||||
menuAlign: 'tl-tr',
|
||||
cls: "shifted-right",
|
||||
style: 'min-width: 120px; height: auto; min-height: fit-content;',
|
||||
additionalAlign: function (root) {
|
||||
var parent = root.parent();
|
||||
var parentOffset = Common.Utils.getOffset(parent);
|
||||
root.css({
|
||||
left: parentOffset.left + (parent.outerWidth() - root.outerWidth()) / 2,
|
||||
top: parentOffset.top - root.outerHeight() - 8
|
||||
});
|
||||
},
|
||||
items: [
|
||||
new Common.UI.MenuItem({
|
||||
caption: this.txtPen,
|
||||
value: 'pen',
|
||||
iconCls: 'menu__icon btn-pen-tool',
|
||||
checkable: true,
|
||||
toggleGroup: 'preview-draw-tool'
|
||||
}),
|
||||
new Common.UI.MenuItem({
|
||||
caption: this.txtHighlighter,
|
||||
value: 'highlighter',
|
||||
iconCls: 'menu__icon btn-highlighter-tool',
|
||||
checkable: true,
|
||||
toggleGroup: 'preview-draw-tool'
|
||||
}),
|
||||
{ caption: '--' },
|
||||
{
|
||||
caption: this.txtInkColor,
|
||||
menu: new Common.UI.Menu({
|
||||
menuAlign: 'tl-tr',
|
||||
cls: "preview-draw-color-picker-menu",
|
||||
style: 'min-width: 140px; padding: 0px; height: auto; min-height: fit-content;',
|
||||
})
|
||||
},
|
||||
{ caption: '--' },
|
||||
new Common.UI.MenuItem({
|
||||
caption: this.txtEraser,
|
||||
value: 'eraser',
|
||||
iconCls: 'menu__icon btn-clearstyle',
|
||||
checkable: true,
|
||||
toggleGroup: 'preview-draw-tool'
|
||||
}),
|
||||
{ caption: this.txtEraseScreen, value: 'eraseAll', iconCls: 'menu__icon btn-clear-all' },
|
||||
]
|
||||
}),
|
||||
});
|
||||
|
||||
this.drawColorPicker = new Common.UI.ColorPaletteExt({
|
||||
el: $('.preview-draw-color-picker-menu'),
|
||||
colors: ["FFFFFF","000000","E81416","FFA500","FAEB36","79C314","487DE7","4B369D","70369D"],
|
||||
value: 'E81416'
|
||||
});
|
||||
this.drawColorPicker.on('select', (_picker, color) => {
|
||||
this.currentDrawColor = color;
|
||||
const currentTool = this.btnDraw.menu.getChecked();
|
||||
|
||||
if (!currentTool) {
|
||||
this.btnDraw.toggle(true);
|
||||
this.btnDraw.menu.items[0].setChecked(true);
|
||||
this.drawTool['pen']();
|
||||
return;
|
||||
}
|
||||
|
||||
if (currentTool.value === 'pen' || currentTool.value === 'highlighter') {
|
||||
this.drawTool[currentTool.value]();
|
||||
} else {
|
||||
this.btnDraw.menu.items[this.btnDraw.menu.items.indexOf(currentTool)].setChecked(false);
|
||||
this.btnDraw.menu.items[0].setChecked(true);
|
||||
this.drawTool['pen']();
|
||||
}
|
||||
});
|
||||
|
||||
this.btnDraw.menu.on('item:click', (_, item) => {
|
||||
if (this.currentDrawTool === item.value) {
|
||||
item.setChecked(false);
|
||||
this.drawTool['select']();
|
||||
this.btnDraw.toggle(false);
|
||||
this.currentDrawTool = undefined;
|
||||
return;
|
||||
}
|
||||
|
||||
if (item.value === 'eraseAll') {
|
||||
this.btnDraw.toggle(false);
|
||||
const currentTool = this.btnDraw.menu.getChecked();
|
||||
currentTool && currentTool.setChecked(false);
|
||||
} else {
|
||||
this.btnDraw.toggle(true);
|
||||
this.currentDrawTool = item.value;
|
||||
}
|
||||
|
||||
this.drawTool[item.value]();
|
||||
});
|
||||
}
|
||||
|
||||
this.btnPrev = new Common.UI.Button({
|
||||
el: $('#btn-preview-prev',this.el),
|
||||
hint: this.txtPrev,
|
||||
@ -154,6 +276,11 @@ define([
|
||||
});
|
||||
this.btnClose.on('click', _.bind(function() {
|
||||
if (this.api) this.api.EndDemonstration();
|
||||
if (this.btnDraw) {
|
||||
this.btnDraw.menu.clearAll();
|
||||
this.btnDraw.toggle(false);
|
||||
this.currentDrawTool = undefined;
|
||||
}
|
||||
}, this));
|
||||
|
||||
this.btnFullScreen = new Common.UI.Button({
|
||||
@ -243,6 +370,9 @@ define([
|
||||
me.btnFullScreen.changeIcon({curr: 'btn-fullscreen', next: 'btn-preview-exit-fullscreen'});
|
||||
} else {
|
||||
me.btnFullScreen.changeIcon({curr: 'btn-preview-exit-fullscreen', next: 'btn-fullscreen'});
|
||||
if (me.btnDraw) {
|
||||
me.btnDraw.menu.hide();
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout( function() {
|
||||
@ -333,6 +463,7 @@ define([
|
||||
this.$el.off('mousemove');
|
||||
this.fireEvent('editcomplete', this);
|
||||
Common.NotificationCenter.trigger('preview:hide');
|
||||
Common.NotificationCenter.trigger('draw-tool:select');
|
||||
},
|
||||
|
||||
setApi: function(o) {
|
||||
@ -405,6 +536,12 @@ define([
|
||||
}
|
||||
},
|
||||
|
||||
txtDraw: 'Draw',
|
||||
txtPen: 'Pen',
|
||||
txtHighlighter: 'Highlighter',
|
||||
txtEraser: 'Eraser',
|
||||
txtEraseScreen: 'Erase screen',
|
||||
txtInkColor: 'Ink color',
|
||||
txtPrev: 'Previous Slide',
|
||||
txtNext: 'Next Slide',
|
||||
txtClose: 'Close Slideshow',
|
||||
|
||||
@ -2022,6 +2022,12 @@
|
||||
"PE.Views.DocumentHolder.txtWarnUrl": "Clicking this link can be harmful to your device and data.<br>Are you sure you want to continue?",
|
||||
"PE.Views.DocumentHolder.unicodeText": "Unicode",
|
||||
"PE.Views.DocumentHolder.vertAlignText": "Vertical alignment",
|
||||
"PE.Views.DocumentPreview.txtDraw": "Draw",
|
||||
"PE.Views.DocumentPreview.txtPen": "Pen",
|
||||
"PE.Views.DocumentPreview.txtHighlighter": "Highlighter",
|
||||
"PE.Views.DocumentPreview.txtEraser": "Eraser",
|
||||
"PE.Views.DocumentPreview.txtEraseScreen": "Erase screen",
|
||||
"PE.Views.DocumentPreview.txtInkColor": "Ink color",
|
||||
"PE.Views.DocumentPreview.goToSlideText": "Go to slide",
|
||||
"PE.Views.DocumentPreview.slideIndexText": "Slide {0} of {1}",
|
||||
"PE.Views.DocumentPreview.txtClose": "Close slideshow",
|
||||
|
||||
|
After Width: | Height: | Size: 179 B |
|
After Width: | Height: | Size: 284 B |
|
After Width: | Height: | Size: 330 B |
|
After Width: | Height: | Size: 271 B |
|
After Width: | Height: | Size: 341 B |
|
After Width: | Height: | Size: 193 B |
|
After Width: | Height: | Size: 298 B |
|
After Width: | Height: | Size: 377 B |
|
After Width: | Height: | Size: 322 B |
|
After Width: | Height: | Size: 368 B |
|
After Width: | Height: | Size: 248 B |
|
After Width: | Height: | Size: 351 B |
|
After Width: | Height: | Size: 420 B |
|
After Width: | Height: | Size: 376 B |
|
After Width: | Height: | Size: 422 B |
|
After Width: | Height: | Size: 189 B |
|
After Width: | Height: | Size: 255 B |
|
After Width: | Height: | Size: 294 B |
|
After Width: | Height: | Size: 208 B |
|
After Width: | Height: | Size: 266 B |
@ -0,0 +1,4 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4 4v11h7v1H3.2a.2.2 0 0 1-.2-.2V3.2c0-.11.09-.2.2-.2h12.6c.11 0 .2.09.2.2V11h-1V4z" fill="#000"/>
|
||||
<path d="M17.278 16.621 15.157 14.5l2.121-2.121-.707-.707-2.121 2.12-2.122-2.12-.707.707 2.122 2.121-2.122 2.121.707.707 2.122-2.12 2.121 2.12z" fill="#000"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 378 B |
@ -0,0 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.462 16c-.515 0-1.176-.428-1.54-.803L3.55 13.784c-.758-.782-.722-2.012.036-2.793l6.138-6.405a1.9 1.9 0 0 1 2.746 0l2.402 2.476c.758.781 1.373 1.415 1.03 2.476L10.83 15H15v1zm2.912-1 3.783-4.047-4.119-4.245-4.765 4.99c-.379.391-.415.987-.036 1.378l1.371 1.413c.182.188.597.51.854.51zm2.41-9.706a.95.95 0 0 0-1.372 0l-.649.746 4.081 4.206 1.029-1.062c.343-.353-.307-1.024-.687-1.415z" fill="#000"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 515 B |
@ -0,0 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.947 2.022c-.103-.06-.255.01-.314.113L5.51 7.544c-.098.17-.056.545.115.643l.503.29-1.408 4.535c-.066.165.053.457.207.545l.432.25-1.5 2.598c-.135.239-.185.579.089.579h3.859c.107 0 .21-.05.277-.133l1-.894.26.15c.154.09.487-.093.596-.233l3.15-3.377.398.23c.17.098.584-.013.683-.183L17.314 7.1a.214.214 0 0 0-.079-.293l-.495-.285a.214.214 0 0 0-.292.078l-2.893 5.01-.126-.072-.017-.011L6.626 7.61c-.005-.004.106.059.1.056l-.1-.056L9.5 2.635c.06-.102.045-.268-.057-.328zM6.994 8.978l5.196 3-2.866 2.964-3.464-2z" fill="#000"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 640 B |
@ -0,0 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 12a2 2 0 1 1 0-4 2 2 0 0 1 0 4m0 3a5 5 0 1 0 0-10 5 5 0 0 0 0 10" fill="#000"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 200 B |
@ -0,0 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.831 2.111a.07.07 0 0 0-.098.026l-3.463 6-1.98 5.661a.14.14 0 0 0 .066.162l.049.029 2.935 1.694.035.02c.056.033.13.024.175-.023l3.916-4.542 3.458-5.99a.07.07 0 0 0-.026-.098l-.742-.429a.07.07 0 0 0-.098.027L12.1 9.772l-3.463-2L11.6 2.638a.07.07 0 0 0-.027-.098zm.77 8.527-3.367 3.83-1.732-1 1.635-4.83zm-5.86 3.546S5 16.642 5.617 17c.619.357 2.376-1.515 2.376-1.515z" fill="#000"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 501 B |
|
After Width: | Height: | Size: 246 B |
|
After Width: | Height: | Size: 436 B |
|
After Width: | Height: | Size: 510 B |
|
After Width: | Height: | Size: 360 B |
|
After Width: | Height: | Size: 520 B |
@ -68,4 +68,25 @@
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
#btn-preview-draw {
|
||||
button {
|
||||
min-width: 20px;
|
||||
}
|
||||
|
||||
.menu-item.checked {
|
||||
color: @text-normal-pressed-ie;
|
||||
color: @text-normal-pressed;
|
||||
background-color: @highlight-button-pressed-ie;
|
||||
background-color: @highlight-button-pressed;
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-item-icon {
|
||||
background-position-x: -20px;
|
||||
background-position-x: @button-small-active-icon-offset-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||